DataList
DataList displays label and value pairs in an aligned list.
Source
LLM docs
Package
Examples
5
Properties
38
Playground
Basics
Compose
DataList.Item with DataList.ItemLabel and DataList.ItemValue to render aligned label/value pairs.Loading demo…
import { DataList } from '@plocks/ui';
export function Demo() {
return (
<DataList>
<DataList.Item>
<DataList.ItemLabel>Name</DataList.ItemLabel>
<DataList.ItemValue>John Doe</DataList.ItemValue>
</DataList.Item>
<DataList.Item>
<DataList.ItemLabel>Email</DataList.ItemLabel>
<DataList.ItemValue>john@example.com</DataList.ItemValue>
</DataList.Item>
<DataList.Item>
<DataList.ItemLabel>Role</DataList.ItemLabel>
<DataList.ItemValue>Software Engineer</DataList.ItemValue>
</DataList.Item>
</DataList>
);
}Vertical Orientation
Set
orientation="vertical" to stack each label above its value — useful for longer values or narrow layouts.Loading demo…
import { DataList } from '@plocks/ui';
export function Demo() {
return (
<DataList orientation="vertical">
<DataList.Item>
<DataList.ItemLabel>Shipping address</DataList.ItemLabel>
<DataList.ItemValue>2825 Winding Way, Providence, RI 02908</DataList.ItemValue>
</DataList.Item>
<DataList.Item>
<DataList.ItemLabel>Tracking number</DataList.ItemLabel>
<DataList.ItemValue>1Z 999 AA1 01 2345 6784</DataList.ItemValue>
</DataList.Item>
<DataList.Item>
<DataList.ItemLabel>Estimated delivery</DataList.ItemLabel>
<DataList.ItemValue>July 12, 2026</DataList.ItemValue>
</DataList.Item>
</DataList>
);
}Dividers & Aligned Labels
Enable
withDivider to separate items with a border, and set labelWidth to keep the value column aligned.Loading demo…
import { DataList } from '@plocks/ui';
export function Demo() {
return (
<DataList withDivider labelWidth={120}>
<DataList.Item>
<DataList.ItemLabel>Plan</DataList.ItemLabel>
<DataList.ItemValue>Pro (annual)</DataList.ItemValue>
</DataList.Item>
<DataList.Item>
<DataList.ItemLabel>Seats</DataList.ItemLabel>
<DataList.ItemValue>12 of 20 used</DataList.ItemValue>
</DataList.Item>
<DataList.Item>
<DataList.ItemLabel>Renews</DataList.ItemLabel>
<DataList.ItemValue>January 1, 2027</DataList.ItemValue>
</DataList.Item>
</DataList>
);
}Sizes
Use the
size prop (xs–3xl, or a number) to scale font size and spacing together.Loading demo…
import { Block, DataList, Text } from '@plocks/ui';
const SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] as const;
export function Demo() {
return (
<Block>
{SIZES.map((size) => (
<Block key={size}>
<Text variant="small" c="secondary">{size}</Text>
<DataList size={size} labelWidth={90}>
<DataList.Item label="Status" value="Active" />
<DataList.Item label="Region" value="us-east-1" />
</DataList>
</Block>
))}
</Block>
);
}Data Prop Shorthand
Skip the composition and pass a
data array of { label, value } objects to render items automatically.Loading demo…
import { DataList } from '@plocks/ui';
const details = [
{ label: 'Order', value: '#SS-10428' },
{ label: 'Placed', value: 'July 3, 2026' },
{ label: 'Total', value: '$248.00' },
{ label: 'Payment', value: 'Visa •••• 4242' },
];
export function Demo() {
return <DataList data={details} withDivider labelWidth={100} />;
}React Native design for iOS, Android, and Web.
Quick Links
Resources