- 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-listThe 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>
)
}
Variants
Use the variant prop to change the variant of the datalist component.
Added in v3.1.x
- New Users
- 234
- Sales
- £12,340
- Revenue
- 3,450
- New Users
- 234
- Sales
- £12,340
- Revenue
- 3,450
import { For, Stack } from "@chakra-ui/react"
import { DataListItem, DataListRoot } from "@/components/ui/data-list"
const Demo = () => {
return (
<Stack gap="8">
<For each={["subtle", "bold"]}>
{(variant) => (
<DataListRoot variant={variant} key={variant}>
{stats.map((item) => (
<DataListItem
key={item.label}
label={item.label}
value={item.value}
/>
))}
</DataListRoot>
)}
</For>
</Stack>
)
}
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" },
]
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 UsersThis is some info
- 234
- SalesThis is some info
- £12,340
- RevenueThis is some info
- 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>
)
}
Separator
Use the divideY prop on the DataListRoot to add a separator between items.
- First Name
- Jassie
- Last Name
- Bhatia
- jassie@jassie.dev
- Phone
- 1234567890
- Address
- 1234 Main St, Anytown, USA
import { DataListItem } from "@/components/ui/data-list"
import { DataListRoot } from "@/components/ui/data-list"
const Demo = () => {
return (
<DataListRoot orientation="horizontal" divideY="1px" maxW="md">
{items.map((item) => (
<DataListItem
pt="4"
grow
key={item.value}
label={item.label}
value={item.value}
/>
))}
</DataListRoot>
)
}
const items = [
{ label: "First Name", value: "Jassie" },
{ label: "Last Name", value: "Bhatia" },
{ label: "Email", value: "jassie@jassie.dev" },
{ label: "Phone", value: "1234567890" },
{ label: "Address", value: "1234 Main St, Anytown, USA" },
]
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 |