Data List

Basic

A semantic key-value pair list for structured metadata display. Supports horizontal (grid) and vertical layouts, dividers, and staggered Framer Motion entrance animations.

<DataListitems={[  { term: "Status", detail: "Active" },  { term: "Plan", detail: "Pro" },  { term: "Region", detail: "US East (us-east-1)" },  { term: "Created", detail: "January 14, 2025" },]}/>

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add data-list

pnpm dlx @work-rjkashyap/unified-ui add data-list

npx @work-rjkashyap/unified-ui add data-list

bunx @work-rjkashyap/unified-ui add data-list

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import {
	DataList,
	Card,
	CardHeader,
	CardBody,
} from "@work-rjkashyap/unified-ui";

Basic Usage

Pass an items array with term (key) and detail (value) entries. The default orientation is horizontal, which renders a two-column grid aligning all terms and details.

<DataList
  items={[
    { term: "Name", detail: "Rajeshwar Kashyap" },
    { term: "Email", detail: "rj@example.com" },
    { term: "Role", detail: "Admin" },
  ]}
/>

Orientations

Horizontal (default)

Terms and details are rendered in a two-column grid. Labels are right-aligned to the first column and values fill the remaining width.

<DataListorientation="horizontal"items={[  { term: "Full Name", detail: "Rajeshwar Kashyap" },  { term: "Email", detail: "rj@example.com" },  { term: "Role", detail: "Administrator" },  { term: "Last Login", detail: "Today at 9:41 AM" },  { term: "2FA", detail: "Enabled" },]}/>

Vertical

Terms and details are stacked vertically — the term appears above its detail. Useful for narrow containers or mobile-first layouts.

<DataListorientation="vertical"items={[  { term: "Full Name", detail: "Rajeshwar Kashyap" },  { term: "Email", detail: "rj@example.com" },  { term: "Role", detail: "Administrator" },  { term: "Plan", detail: "Pro" },]}/>

With Dividers

Set dividers to add horizontal rules between items for visual separation.

<DataListdividersitems={[  { term: "Status", detail: "Active" },  { term: "Plan", detail: "Pro — $49/month" },  { term: "Billing Cycle", detail: "Monthly" },  { term: "Next Invoice", detail: "February 1, 2025" },  { term: "Payment Method", detail: "Visa ending in 4242" },]}/>

Sizes

Three text size presets for different density contexts.

<DataList size="sm" items={items} /><DataList size="md" items={items} /><DataList size="lg" items={items} />

Rich Detail Values

Both term and detail accept ReactNode, so you can embed badges, links, avatars, or any other component.

<DataListdividersitems={[  {    term: "Status",    detail: (      <span className="flex items-center gap-1.5">        <span className="size-2 rounded-full bg-success" />        <span className="text-success font-medium">Active</span>      </span>    ),  },  {    term: "Plan",    detail: <Badge variant="primary">Pro</Badge>,  },  {    term: "Documentation",    detail: <a href="/docs" className="text-primary hover:underline">View docs →</a>,  },  {    term: "API Version",    detail: <code>v2024-01-14</code>,  },]}/>

Without Animation

Set animated={false} to disable the staggered entrance animation.

<DataList
  animated={false}
  items={[
    { term: "Name", detail: "Unified UI" },
    { term: "Version", detail: "1.0.0" },
  ]}
/>

In a Card

A common pattern is to place a DataList inside a card for structured detail views.

import { Card, CardHeader, CardBody } from "@work-rjkashyap/unified-ui";

<Card>
  <CardHeader>
    <h3 className="text-sm font-semibold">Account Details</h3>
  </CardHeader>
  <CardBody className="p-0">
    <DataList
      dividers
      items={[
        { term: "Account ID", detail: "acct_1Nxyz..." },
        { term: "Plan", detail: "Pro" },
        { term: "Billing Email", detail: "billing@example.com" },
        { term: "Created", detail: "January 14, 2025" },
        { term: "Status", detail: "Active" },
      ]}
      className="px-4 py-2"
    />
  </CardBody>
</Card>

In a Sidebar Panel

<aside className="w-64 border-l border-border p-4 flex flex-col gap-4">
  <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
    Project Info
  </h4>
  <DataList
    orientation="vertical"
    size="sm"
    items={[
      { term: "Repository", detail: "unified-ui/design-system" },
      { term: "Branch", detail: "main" },
      { term: "Last commit", detail: "3 hours ago" },
      { term: "CI Status", detail: "Passing" },
    ]}
  />
</aside>

Responsive Layout

Switch between vertical (mobile) and horizontal (desktop) orientations using responsive logic.

import { useMediaQuery } from "@/hooks/use-media-query";

function ResponsiveDataList() {
  const isDesktop = useMediaQuery("(min-width: 768px)");

  return (
    <DataList
      orientation={isDesktop ? "horizontal" : "vertical"}
      items={profileItems}
    />
  );
}

Props

DataList

DataListItem

Motion

• Stagger entrance — Items animate in using the staggerContainer + fadeIn preset combination. Each item fades from opacity: 0 to 1 with a cascading delay between items.
• Reduced motion — Animation is fully disabled when prefers-reduced-motion is active via useReducedMotion().
• Set animated={false} to disable animation globally regardless of user preferences.

Accessibility

• Renders a semantic <dl> / <dt> / <dd> structure — screen readers announce this as a description list.
• Each term (<dt>) is automatically associated with its detail (<dd>) by DOM proximity.
• In horizontal mode, contents display is used for CSS Grid layout so the <dt> / <dd> relationship is preserved in the DOM despite visual rearrangement.
• Both term and detail accept ReactNode — ensure any interactive content within (links, buttons) is keyboard accessible.

Design Tokens