DataList
A component for displaying key-value data in a list format. Useful for displaying metadata, details, or any structured information.
Basic
Use the DataListItem wrapper with label and value props for simple key-value pairs.
- Name
- John Doe
- john@example.com
- Phone
- +1 (555) 123-4567
Horizontal
- New Users
- 234
- Sales
- $12,340
- Revenue
- $3,450
Sizes
Row gap stays dense; size mainly scales type. Prefer sm or default md on detail cards.
- Size
- Small (sm)
- Gap
- gap-1
- Size
- Medium (md)
- Gap
- gap-1.5
- Size
- Large (lg)
- Gap
- gap-2.5
Variants
Labels stay muted; values are the emphasis. bold (default) uses medium-weight values; subtle uses normal-weight values.
- Variant
- Bold (medium values)
- Status
- Active
- Variant
- Subtle (normal values)
- Status
- Active
With Divider
- First Name
- Jassie
- Last Name
- Bhatia
- jassie@example.com
- Phone
- +1 (555) 987-6543