Data List

Semantic key-value definition list primitive built on HTML <dl>, <dt>, and <dd> elements.

// Plain markup
import { DataList, DataListItem } from "@shavin/ui";

Vertical (default)

Deployment SHA: sha-a7f93c2
Edge Region: us-east-1 (N. Virginia)
p99 Latency: 38ms
TLS Certificate: Valid (ECDSA 256-bit)

Component Source

<DataList className="w-80">
  <DataListItem label="Deployment SHA">sha-a7f93c2</DataListItem>
  <DataListItem label="Edge Region">us-east-1 (N. Virginia)</DataListItem>
  <DataListItem label="p99 Latency">38ms</DataListItem>
  <DataListItem label="TLS Certificate">Valid (ECDSA 256-bit)</DataListItem>
</DataList>

Horizontal

Status: Operational
Uptime SLA: 99.98% (Last 90d)
Active Nodes: 32 / 32 Synced

Component Source

<DataList orientation="horizontal" className="w-full max-w-md">
  <DataListItem label="Status">Operational</DataListItem>
  <DataListItem label="Uptime SLA">99.98% (Last 90d)</DataListItem>
  <DataListItem label="Active Nodes">32 / 32 Synced</DataListItem>
</DataList>

Props

Prop	Type	Default
orientation	"horizontal" \| "vertical" \| null	"vertical"