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>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component DescriptionListDefault layout:inline style:description-list {
  aria-label:"Details"
  label "Details"
  text "Name"
  text "Ada"
  text "Status"
  text "Paid"
}

page "/audit/description-list/default" type:custom {
  use DescriptionListDefault
}

API Reference

Generated from the component's exported types.

DescriptionListProps

Extends HTMLAttributes<HTMLDListElement>, VariantProps<typeof descriptionListVariants>

Prop	Type	Default	Description
`layout`	`"stacked" \| "horizontal" \| "grid"`	`"stacked"`	How term/details pairs are arranged. `stacked` places each term above its details; `horizontal` aligns them into classic two-column rows with a divider between rows; `grid` spreads grouped pairs across a responsive 1 → 2 → 3 column set of card tiles.
`size`	`"sm" \| "md"`	`"md"`	Density preset controlling the type scale and spacing.
`striped`	`boolean`	`false`	Tints alternate rows for scannability. The zebra counts only div-wrapped rows — wrap each pair in a row (or a plain `<div>`); raw `<dt>`/`<dd>` pairs are never counted or tinted.
`bordered`	`boolean`	`false`	Wraps the list in a rounded outer border and insets the content.
`detailsAlign`	`"start" \| "end"`	`"start"`	Alignment of the details column. Logical (`text-start`/`text-end`), so `end` stays correct in RTL.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.
`id`	`string`	—	DOM id of the root element.

DescriptionItemProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`term`*	`ReactNode`	—	The label rendered in the pair's .
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

DescriptionTermProps

Extends HTMLAttributes<HTMLElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

DescriptionDetailsProps

Extends HTMLAttributes<HTMLElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.