DataList

stable

Key-value list for structured data display

import { DataList } from "@nodus/design-system"

Model: Claude Opus 4
Context: 200K tokens
Temperature: 0.7
Provider: Anthropic

Uptime: 99.97%
Requests: 1.2M
P99 Latency: 340ms

Loading demo…

Props

Prop	Type	Default	Description
`items`req	`DataListItem[]`	—	Array of { label, value } pairs
`orientation`	`"horizontal" \| "vertical"`	"vertical"	Layout direction

itemsrequired

Type DataListItem[]Default —

Array of { label, value } pairs

orientation

Type "horizontal" | "vertical"Default "vertical"

Layout direction

Metadatasemantic type border

MobileStacks / Scroll

Multi-column data lists compress to a single column on narrow viewports. Label/value pairs stack vertically. No code changes required — this is CSS-driven via the ds-fin token layout.

Design Rationale

This component was designed to express:

View all principles →

Explore Related

Table→

Data table with sortable columns and row selection

Was this helpful?