Description List

Key–value pairs as a description list (<dl>).

Import

import { DataList } from '@marbleui/ui'

Props

<DataList>

Prop	Type	Default
items *required	`DataListItem[]`	`—`
className	`string`	`—`
orientation	`'vertical' \| 'horizontal'`	`'horizontal'`
variant	`'divided' \| 'card' \| 'plain'`	`'divided'`

Usage notes

Read-only key–value pairs such as account details, rendered as a <dl>. For tabular data with many rows use Table; for a list of people or items use List.

<DataList
  variant="card"
  items={[
    { label: 'Plan', value: 'Pro · annual' },
    { label: 'Seats', value: '12 of 15' },
  ]}
/>

items is an array of { label, value }; both accept any node, so values can be badges or copy buttons.
orientation is horizontal (default, label column beside value) or vertical; variant is divided (default), plain or card.
Items are keyed by index, so don’t rely on item state when reordering.

Example source · show

import { Badge } from '../badge'
import { CopyButton } from '../copy-button'
import { DataList } from './data-list'

const items = [
  { label: 'Status', value: <Badge tone="success" dot>Active</Badge> },
  { label: 'Plan', value: 'Pro · annual' },
  { label: 'Customer ID', value: <span className="inline-flex items-center gap-1 font-mono">cus_8f2Kd9 <CopyButton value="cus_8f2Kd9" /></span> },
  { label: 'Created', value: 'March 3, 2025' },
  { label: 'Seats', value: '12 of 15' },
]

export const styles = {
  Divided: () => <DataList items={items} className="w-96" />,
  Card: () => <DataList items={items} variant="card" className="w-96" />,
  Vertical: () => <DataList items={items.slice(0, 4)} orientation="vertical" variant="plain" className="w-56" />,
}

Source: packages/ui/src/data-list/data-list.tsx

Catalog