Shim

DataList

Display key-value pairs in a list.

Source
GitHub
Issues
Report
Install
pnpm dlx @kkga/shim add data-list
Name
John Doe
Role
Designer
Email
john@doe.com
Status
Active
import { Badge } from "@/shim-ui/badge";
import { DataList, DataListItem } from "@/shim-ui/data-list";
import { Link } from "@/shim-ui/link";

export default () => (
  <DataList>
    <DataListItem label="Name" value="John Doe" />
    <DataListItem label="Role" value="Designer" />
    <DataListItem label="Email" value={<Link href="#">john@doe.com</Link>} />
    <DataListItem
      label="Status"
      value={<Badge intent="success">Active</Badge>}
    />
  </DataList>
);

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add data-list

Label Position

Use the labelPosition prop to set the label position.

Name
John Doe
Role
Designer
Email
john@doe.com
Status
Active
Name
John Doe
Role
Designer
Email
john@doe.com
Status
Active
import { Badge } from "@/shim-ui/badge";
import { DataList, DataListItem } from "@/shim-ui/data-list";
import { Link } from "@/shim-ui/link";

export default () =>
  (["side", "side-end"] as const).map((labelPosition) => (
    <DataList
      className="w-[200px] grid-cols-[1fr_2fr]"
      key={labelPosition}
      labelPosition={labelPosition}
    >
      <DataListItem label="Name" value="John Doe" />
      <DataListItem label="Role" value="Designer" />
      <DataListItem label="Email" value={<Link href="#">john@doe.com</Link>} />
      <DataListItem
        label="Status"
        value={<Badge intent="success">Active</Badge>}
      />
    </DataList>
  ));

Size

Use the size prop to set the size of the data list. Child components that support size will use the same size unless overridden.

Name
John Doe
Role
Designer
Email
john@doe.com
Status
Active
Name
John Doe
Role
Designer
Email
john@doe.com
Status
Active
Name
John Doe
Role
Designer
Email
john@doe.com
Status
Active
Name
John Doe
Role
Designer
Email
john@doe.com
Status
Active
"use client";
import { Badge } from "@/shim-ui/badge";
import { DataList, DataListItem } from "@/shim-ui/data-list";
import { Link } from "@/shim-ui/link";

export default () => (
  <div className="grid grid-cols-2 gap-y-6 self-start">
    {([1, 2, 3, 4] as const).map((size) => (
      <DataList key={size} labelPosition="side" size={size}>
        <DataListItem label="Name" value="John Doe" />
        <DataListItem label="Role" value="Designer" />
        <DataListItem
          label="Email"
          value={<Link href="#">john@doe.com</Link>}
        />
        <DataListItem
          label="Status"
          value={<Badge intent="success">Active</Badge>}
        />
      </DataList>
    ))}
  </div>
);