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
- Size
- Small (sm)
- Size
- Medium (md)
- Size
- Large (lg)
Variants
- Variant
- Subtle (muted labels)
- Status
- Active
- Variant
- Bold (standard labels)
- Status
- Active
With Divider
- First Name
- Jassie
- Last Name
- Bhatia
- jassie@example.com
- Phone
- +1 (555) 987-6543