Data Display

Description List

Server Component

Semantic dl/dt/dd pairs in stacked, horizontal, or grid-card layouts for detail panes and order summaries.

Import

tsx

import { DescriptionList } from "@cronus-ui/ui";

bash

npx cronus-ui add description-list

Examples

Stacked

The default layout places each term above its details. Compose raw `DescriptionTerm` / `DescriptionDetails` pairs, or group each pair with `DescriptionItem`.

Full name: Margot Foster
Email: margot@example.com
Plan: Pro — billed yearly

tsx

<DescriptionList className="max-w-sm">
  <DescriptionTerm>Full name</DescriptionTerm>
  <DescriptionDetails>Margot Foster</DescriptionDetails>
  <DescriptionTerm>Email</DescriptionTerm>
  <DescriptionDetails>margot@example.com</DescriptionDetails>
  <DescriptionTerm>Plan</DescriptionTerm>
  <DescriptionDetails>Pro — billed yearly</DescriptionDetails>
</DescriptionList>

Horizontal order summary

The `horizontal` layout aligns terms and details into two columns with a divider between rows — the classic definition list. `bordered` adds the outer card shell, and `detailsAlign` set to `end` right-aligns values (logical, so it flips in RTL).

Order: #10245
Date: June 23, 2026
Payment method: Visa ending in 4242
Status: Paid
Total: $149.00

tsx

<DescriptionList layout="horizontal" detailsAlign="end" bordered className="max-w-md">
  <DescriptionItem term="Order">#10245</DescriptionItem>
  <DescriptionItem term="Date">June 23, 2026</DescriptionItem>
  <DescriptionItem term="Payment method">Visa ending in 4242</DescriptionItem>
  <DescriptionItem term="Status">
    <Badge variant="success">Paid</Badge>
  </DescriptionItem>
  <DescriptionItem term="Total">
    <span className="font-mono font-medium tabular-nums">$149.00</span>
  </DescriptionItem>
</DescriptionList>

Striped rows

`striped` tints alternate rows for scannability. The zebra applies to grouped rows, so wrap each pair with `DescriptionItem` — raw `DescriptionTerm`/`DescriptionDetails` pairs don't participate.

Environment: Production
API version: 2026-06-01
Webhook endpoint: https://api.example.com/hooks
Signing secret: whsec_••••••••
Mode: Live

tsx

<DescriptionList layout="horizontal" striped className="max-w-md">
  <DescriptionItem term="Environment">Production</DescriptionItem>
  <DescriptionItem term="API version">2026-06-01</DescriptionItem>
  <DescriptionItem term="Webhook endpoint">https://api.example.com/hooks</DescriptionItem>
  <DescriptionItem term="Signing secret">whsec_••••••••</DescriptionItem>
  <DescriptionItem term="Mode">
    <Badge variant="secondary">Live</Badge>
  </DescriptionItem>
</DescriptionList>

Grid cards

The `grid` layout spreads `DescriptionItem` pairs across a responsive 1 → 2 → 3 column set of card tiles — a compact settings review. Shown at the `sm` size.

Region: São Paulo (GRU)
Runtime: Node 22 LTS
Instances: 3 × shared-cpu
Custom domain: store.cronus.dev
TLS: Auto-managed
Deploy hook: Enabled

tsx

<DescriptionList layout="grid" size="sm">
  <DescriptionItem term="Region">São Paulo (GRU)</DescriptionItem>
  <DescriptionItem term="Runtime">Node 22 LTS</DescriptionItem>
  <DescriptionItem term="Instances">3 × shared-cpu</DescriptionItem>
  <DescriptionItem term="Custom domain">store.cronus.dev</DescriptionItem>
  <DescriptionItem term="TLS">Auto-managed</DescriptionItem>
  <DescriptionItem term="Deploy hook">Enabled</DescriptionItem>
</DescriptionList>

API Reference

Generated from the component's exported types.