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)

Name: Jordan Rivera
Email: jordan@example.com
Plan: Pro — billed annually

<DataList className="w-72">
  <DataListItem label="Name">Jordan Rivera</DataListItem>
  <DataListItem label="Email">jordan@example.com</DataListItem>
  <DataListItem label="Plan">Pro — billed annually</DataListItem>
</DataList>

Horizontal

Status: Active
Renews: Aug 14, 2026
Seats: 5 / 10

<DataList orientation="horizontal" className="w-96">
  <DataListItem label="Status">Active</DataListItem>
  <DataListItem label="Renews">Aug 14, 2026</DataListItem>
  <DataListItem label="Seats">5 / 10</DataListItem>
</DataList>

Props

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