DataList

Used to display a list of similar data items.

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

'use client'

import { DataList } from '@saas-ui/react'

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' },
]

export const DataListBasic = () => {
  return (
    <DataList.Root orientation="horizontal">
      {stats.map((item) => (
        <DataList.Item key={item.label}>
          <DataList.ItemLabel>{item.label}</DataList.ItemLabel>
          <DataList.ItemValue>{item.value}</DataList.ItemValue>
        </DataList.Item>
      ))}
    </DataList.Root>
  )
}

Anatomy

import { DataList } from '@saas-ui/react/data-list'

<DataList>
  <DataList.Item>
    <DataList.Label>Label</DataList.Label>
    <DataList.Value>Value</DataList.Value>
  </DataList.Item>
</DataList>

Examples

Sizes

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

Name: John Doe

Name: John Doe

Name: John Doe

'use client'

import { Stack } from '@chakra-ui/react'
import { DataList } from '@saas-ui/react'

export const DataListWithSizes = () => {
  return (
    <Stack gap="4">
      <DataList.Root size="sm">
        <DataList.Item>
          <DataList.ItemLabel>Name</DataList.ItemLabel>
          <DataList.ItemValue>John Doe</DataList.ItemValue>
        </DataList.Item>
      </DataList.Root>
      <DataList.Root size="md">
        <DataList.Item>
          <DataList.ItemLabel>Name</DataList.ItemLabel>
          <DataList.ItemValue>John Doe</DataList.ItemValue>
        </DataList.Item>
      </DataList.Root>
      <DataList.Root size="lg">
        <DataList.Item>
          <DataList.ItemLabel>Name</DataList.ItemLabel>
          <DataList.ItemValue>John Doe</DataList.ItemValue>
        </DataList.Item>
      </DataList.Root>
    </Stack>
  )
}

Orientation

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

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

'use client'

import { DataList } from '@saas-ui/react'

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' },
]

export const DataListOrientation = () => {
  return (
    <DataList.Root orientation="horizontal">
      {stats.map((item) => (
        <DataList.Item key={item.label}>
          <DataList.ItemLabel>{item.label}</DataList.ItemLabel>
          <DataList.ItemValue>{item.value}</DataList.ItemValue>
        </DataList.Item>
      ))}
    </DataList.Root>
  )
}

Separator

Use the divideY prop to add a separator between items.

First Name: Jassie
Last Name: Bhatia
Email: jassie@jassie.dev
Phone: 1234567890
Address: 1234 Main St, Anytown, USA

'use client'

import { DataList } from '@saas-ui/react'

export const DataListWithSeparator = () => {
  return (
    <DataList.Root orientation="horizontal" divideY="1px" maxW="md">
      {items.map((item) => (
        <DataList.Item pt="4" flexGrow={1} key={item.value}>
          <DataList.ItemLabel>{item.label}</DataList.ItemLabel>
          <DataList.ItemValue>{item.value}</DataList.ItemValue>
        </DataList.Item>
      ))}
    </DataList.Root>
  )
}

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

Collapsible

Dialog