DataList

Used to display a list of similar data items.

New Users: 234
Sales: £12,340
Revenue: 3,450

import { DataListItem, DataListRoot } from "@/components/ui/data-list"

const stats = [
  { label: "New Users", value: "234", diff: -12, helpText: "Till date" },
  { label: "Sales", value: "£12,340", diff: 12, helpText: "Last 30 days" },
  { label: "Revenue", value: "3,450", diff: 4.5, helpText: "Last 30 days" },
]

const Demo = () => {
  return (
    <DataListRoot orientation="horizontal">
      {stats.map((item) => (
        <DataListItem key={item.label} label={item.label} value={item.value} />
      ))}
    </DataListRoot>
  )
}

Setup

If you don't already have the snippet, run the following command to add the data-list snippet

chakra snippet add data-list

The snippet includes a closed component composition for the DataList component.

Usage

import { DataListItem, DataListRoot } from "@/components/ui/data-list"

<DataListRoot>
  {data.map((item) => (
    <DataListItem key={item.label} label={item.label} value={item.value} />
  ))}
</DataListRoot>

Examples

Sizes

Use the size prop to change the size of the datalist component.

Name: John Doe

Name: John Doe

Name: John Doe

import { Stack } from "@chakra-ui/react"
import { DataListItem, DataListRoot } from "@/components/ui/data-list"

const Demo = () => {
  return (
    <Stack gap="4">
      <DataListRoot size="sm">
        <DataListItem label="Name" value="John Doe" />
      </DataListRoot>
      <DataListRoot size="md">
        <DataListItem label="Name" value="John Doe" />
      </DataListRoot>
      <DataListRoot size="lg">
        <DataListItem label="Name" value="John Doe" />
      </DataListRoot>
    </Stack>
  )
}

Orientation

Use the orientation prop to change the orientation of the datalist component.

New Users: 234
Sales: £12,340
Revenue: 3,450

import { DataListItem, DataListRoot } from "@/components/ui/data-list"

const stats = [
  { label: "New Users", value: "234", diff: -12, helpText: "Till date" },
  { label: "Sales", value: "£12,340", diff: 12, helpText: "Last 30 days" },
  { label: "Revenue", value: "3,450", diff: 4.5, helpText: "Last 30 days" },
]

const Demo = () => {
  return (
    <DataListRoot>
      {stats.map((item) => (
        <DataListItem key={item.label} label={item.label} value={item.value} />
      ))}
    </DataListRoot>
  )
}

Info Tip

Use the info prop on the DataListItem to provide additional context to the datalist.

New Users: 234
Sales: £12,340
Revenue: 3,450

import { DataListItem, DataListRoot } from "@/components/ui/data-list"

const stats = [
  { label: "New Users", value: "234", diff: -12, helpText: "Till date" },
  { label: "Sales", value: "£12,340", diff: 12, helpText: "Last 30 days" },
  { label: "Revenue", value: "3,450", diff: 4.5, helpText: "Last 30 days" },
]

const Demo = () => {
  return (
    <DataListRoot orientation="horizontal">
      {stats.map((item) => (
        <DataListItem
          info="This is some info"
          key={item.label}
          label={item.label}
          value={item.value}
        />
      ))}
    </DataListRoot>
  )
}

Props

Root

Prop	Default	Type
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink' \| 'accent'` The color palette of the component
`orientation`	`'vertical'`	`'horizontal' \| 'vertical'` The orientation of the component
`size`	`'md'`	`'sm' \| 'md' \| 'lg'` The size of the component