Stalk UI

Component

DataList

Presents label/value pairs as an aligned definition list.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/data-list

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<DataList.Root>
  <DataList.Item>
    <DataList.Label>Status</DataList.Label>
    <DataList.Value>
      <Badge tone="success" variant="subtle">
        Authorized
      </Badge>
    </DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label>ID</DataList.Label>
    <DataList.Value>
      <Code>u_2J89JSA4GJ</Code>
    </DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label>Name</DataList.Label>
    <DataList.Value>Ada Lovelace</DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label>Email</DataList.Label>
    <DataList.Value>
      <Link href="mailto:ada@example.com">ada@example.com</Link>
    </DataList.Value>
  </DataList.Item>
</DataList.Root>
Theme
<DataList.Root orientation="vertical">
  <DataList.Item>
    <DataList.Label tone="accent">Accent</DataList.Label>
    <DataList.Value>Primary brand palette</DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label tone="success">Success</DataList.Label>
    <DataList.Value>Operation completed</DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label tone="danger">Danger</DataList.Label>
    <DataList.Value>Action required</DataList.Value>
  </DataList.Item>
</DataList.Root>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`tone``DataListTone`No-Tint the label with a semantic tone. Defaults to the muted neutral text.
PropTypeRequiredDefaultDescription
`orientation``DataListOrientation`No-Lay each label/value pair side by side (\`horizontal\`) or stacked (\`vertical\`).
`size``DataListSize`No-Text scale applied to labels and values.

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

VariantValues
`orientation``horizontal`, `vertical`
`size``sm`, `md`, `lg`

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/data-list.json`
  • Recipe: `dataList`
  • Files: `src/components/ui/data-list.tsx`