Prepared Docs

KeyValueDataList wraps Radix DataList with Prepared styling. Pass items: KeyValueDataListItem[] where each item declares a label and a typed value (DataListValueKind for text, datetime, badge, icon+text, link, status, etc.). Control layout with orientation (DataListOrientation), trim (DataListTrim), labelMinWidth, mono for monospace plain/text values, and optional emptyValue / emptyLabel for blank cells. Clipboard copy is supported for applicable value kinds via onCopySuccess and alwaysVisibleCopyButtons.

Props

Name	Type	Default	Description
`items`	`KeyValueDataListItem[]`	—	Array of key-value items to display in the data list.
`alwaysVisibleCopyButtons`	`boolean`	`false`	When true, copy buttons are always visible instead of appearing on hover.
`emptyLabel`	`string`	—	Accessible name for empty values when an item has no `emptyLabel`. Falls back to the localized default after per-item `emptyLabel`.
`emptyValue`	`ReactNode`	—	Visual content when a value is null, undefined, or empty; passed as `EmptyText` children. Omit for the default em dash.
`labelMinWidth`	`string \| number`	`14rem`	Minimum width for label columns. Accepts a number (pixels) or CSS string.
`mono`	`boolean`	`false`	Renders plain and text-kind values in a monospace font.
`onCopySuccess`	`(() => void)`	—	Callback fired after a value is successfully copied to the clipboard.
`orientation`	`DataListOrientation`	`DataListOrientation.Horizontal`	Layout direction of label-value pairs.
`trim`	`DataListTrim`	`DataListTrim.End`	Controls whitespace trimming around the list.

Storybook

Interactive examples and edge cases for this component are in Storybook.

With Monospace Values

With Empty Values

With Status Values

With Icon Text Values

With Badge Values

With Date Time Values

Sizes

With Badge Popover

All Variants

Re-exported enums and value types (DataListValueKind, DateTimeFormat, BadgeValue, etc.) define each cell payload—import them from @prepared911/ui-core alongside KeyValueDataList.

Default (horizontal)

Vertical

With links

With copyable values

Monospace values

Empty values

Status values

Icon and text values

Badge values

Date and time values

Typed vertical example

Data list / Usage

Data list / Accessibility

Typed vertical example

View Source

Submit Issue

Props

Name	Type	Default	Description
`items`	`KeyValueDataListItem[]`	—	Array of key-value items to display in the data list.
`alwaysVisibleCopyButtons`	`boolean`	`false`	When true, copy buttons are always visible instead of appearing on hover.
`emptyLabel`	`string`	—	Accessible name for empty values when an item has no `emptyLabel`. Falls back to the localized default after per-item `emptyLabel`.
`emptyValue`	`ReactNode`	—	Visual content when a value is null, undefined, or empty; passed as `EmptyText` children. Omit for the default em dash.
`labelMinWidth`	`string \| number`	`14rem`	Minimum width for label columns. Accepts a number (pixels) or CSS string.
`mono`	`boolean`	`false`	Renders plain and text-kind values in a monospace font.
`onCopySuccess`	`(() => void)`	—	Callback fired after a value is successfully copied to the clipboard.
`orientation`	`DataListOrientation`	`DataListOrientation.Horizontal`	Layout direction of label-value pairs.
`trim`	`DataListTrim`	`DataListTrim.End`	Controls whitespace trimming around the list.

Storybook

Interactive examples and edge cases for this component are in Storybook.

With Monospace Values

With Empty Values

With Status Values

With Icon Text Values

With Badge Values

With Date Time Values

Sizes

With Badge Popover

All Variants

Re-exported enums and value types (DataListValueKind, DateTimeFormat, BadgeValue, etc.) define each cell payload—import them from @prepared911/ui-core alongside KeyValueDataList.