Import

1import { DataList } from "packages/ui/src";

Props

DataListProps

Prop	Type	Required
`items`	`DataListItem[]`	Yes
`dividers`	`boolean`	No
`striped`	`boolean`	No

Examples

DataList

Key-value pair display for structured metadata and detail views.

Default

Name: Jonathan Gatlit
Email: [email protected]
Role: Platform Architect
Status: Active
Projects: 5

With Dividers

Name: Jonathan Gatlit
Email: [email protected]
Role: Platform Architect
Status: Active
Projects: 5

Striped

Framework: Next.js 15
Components: 66
Tokens: 983
Routes: 68
Drift Score: 100 / 100
Lighthouse: P:97 A:95 BP:96 SEO:100

Dividers + Striped

Framework: Next.js 15
Components: 66
Tokens: 983
Routes: 68
Drift Score: 100 / 100
Lighthouse: P:97 A:95 BP:96 SEO:100

Metadata

Component Metadata

Familydata-display

FrameworksNext.js, Astro/EmDash

DescriptionKey-value pair list using semantic dl/dt/dd elements with optional dividers and striped rows. Token-driven label width, colors, and spacing.

PropsDataListProps (items: DataListItem[], dividers?: boolean, striped?: boolean)

Statesdefault, with-dividers, striped, single-item, many-items

A11y

Uses semantic dl/dt/dd elements
Container has role=list
Rows have role=listitem

Responsive

Full width by default
Label width fixed, value flexible

Motion

No animation

Token Dependencies

components.dataList.gap
components.dataList.labelColor
components.dataList.labelFontSize
components.dataList.labelWidth
components.dataList.valueColor
components.dataList.valueFontSize
components.dataList.dividerColor
components.dataList.stripedBg
components.dataList.padding

Content Slotsitems (DataListItem array)

CMS Bindings

Items from CMS key-value fields

Test Cases

Renders all items
Has role=list
Rows have role=listitem
Shows dt labels
Shows dd values
Dividers class when enabled
Striped class when enabled
Passes className through