All components
Data List
Label and value pairs for metadata panels, with subtle and bold label emphasis.
- Status
- Active
- Region
- eu-west-1
- Plan
- Pro
- Created
- Mar 12, 2026
Variants
- Status
- Active
- Region
- eu-west-1
- Plan
- Pro
- Created
- Mar 12, 2026
- Status
- Active
- Region
- eu-west-1
- Plan
- Pro
- Created
- Mar 12, 2026
Sizes
- Status
- Active
- Region
- eu-west-1
- Plan
- Pro
- Created
- Mar 12, 2026
- Status
- Active
- Region
- eu-west-1
- Plan
- Pro
- Created
- Mar 12, 2026
- Status
- Active
- Region
- eu-west-1
- Plan
- Pro
- Created
- Mar 12, 2026
Install
zsh — data-list
1bunx stylexblocks add data-listUsage — Ark UI
data-list.tsx
12345678910111213141516171819202122232425import { DataList } from "#components/ui/ark-ui/data-list.tsx";
const details = [ ["Status", "Active"], ["Region", "eu-west-1"], ["Plan", "Pro"],];
export function Example() { return ( // variant/size/orientation resolve once on Root; every part inherits // them via context — the root renders a semantic <dl> with <dt>/<dd> <DataList.Root variant="subtle" size="md" orientation="horizontal"> {details.map(([label, value]) => ( <DataList.Item key={label}> <DataList.ItemLabel>{label}</DataList.ItemLabel> <DataList.ItemValue>{value}</DataList.ItemValue> </DataList.Item> ))} </DataList.Root> );}
// horizontal label column width comes from a custom property:// <DataList.ItemLabel style={styles.labelW}> with { "--label-width": "90px" }