DataList

Display key-value pairs in a list.

Source
GitHub
Issues
Report
Name
John Doe
Role
Designer
Email
john@doe.com
Status
Active
DataList example
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

Orientation

Use the labelPosition prop to set the label position.

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

export default () => (
  <DataList labelPosition="side">
    <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 control the size of the data list. Child components that support size will inherit it automatically.

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
Size example
"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>
);