Renders a list of name/value pairs — perfect for review screens, summary cards, and metadata blocks.
npx shadcn@latest add https://sdk-components.thesqd.com/r/description-list.jsonimport { DescriptionList } from "@/components/ui/description-list";import { DescriptionList } from "@/components/ui/description-list";
export function Example() {
return (
<DescriptionList
items={[
{ term: "Email", details: "jacob@churchmediasquad.com" },
{ term: "Role", details: "Senior staff engineer" },
]}
/>
);
}DescriptionList (single component — pass items as data)
├── variant="stacked" | "inline" | "list" | "metadata"
├── split="33/67" (default) (inline variant column ratio — 25/75, 30/70, 33/67, 40/60, 50/50, 60/40, 67/33, 70/30, 75/25)
├── columns={1|2|3} (metadata variant: number of columns; collapses to 1 on sm screens. default 2)
├── rows={number} (metadata variant: rows per column for column-major fill. default Math.ceil(items.length / columns))
├── items={[
│ { term, details, termClassName?, detailsClassName? },
│ { icon: <Icon />, details, iconClassName? }, (inline/stacked: icon-only row — replaces term with bordered icon square)
│ { term, icon: <Icon />, details, iconClassName? }, (list: term rail + status icon + value, all three shown)
│ { icon: <Icon />, term, details }, (metadata: leading icon + term label + details value; icon is optional)
│ …
│ ]}
├── title={<ReactNode>} (wraps the list in a bordered card)
├── action={<Button … />} (top-right of the title row, e.g. an Edit button)
├── cardClassName (only applies when title/action is set)
└── className (applies to the inner <dl>)
variant rendering:
stacked → term above details (default — used by the multi-step-form review)
inline → two-column grid: term left, details right (terms aligned)
list → divider-free record grid: term rail + status icon + value (term/icon/value all aligned)
metadata → flat multi-column (columns prop) key/value grid; no dividers; per-row optional leading icon;
details accepts any ReactNode — compose SDK editors (badges, date pickers, avatar groups,
duration fields) for a ClickUp-style inline-editable task metadata panel.
Slot exports — DescriptionListItem, DescriptionTerm, DescriptionDetails —
remain available as the escape hatch for fully custom JSX rows.DescriptionList
| Prop | Type | Default | Description |
|---|---|---|---|
items | DescriptionListItemSpec[] | — | List of term/details pairs. Without this prop, drop in `<DescriptionListItem>` children manually. |
variant | "stacked" | "inline" | "list" | "metadata" | "inline" | `inline` (default) is a two-column grid with row dividers; `stacked` puts each term above its details; `list` is a divider-free record grid with an aligned term rail, an optional status icon between term and value, and the value filling the rest; `metadata` is a flat multi-column grid of label+value rows with an optional per-row leading icon — ideal for ClickUp-style task metadata panels. |
columns | 1 | 2 | 3 | 2 | Number of columns for the `metadata` variant. Collapses to 1 column on small screens via responsive grid classes. Ignored by other variants. |
rows | number | Math.ceil(items.length / columns) | Rows per column for the `metadata` variant (column-major fill order). Defaults to an even split. Ignored by other variants. |
split | "25/75" | "30/70" | "33/67" | "40/60" | "50/50" | "60/40" | "67/33" | "70/30" | "75/25" | "33/67" | Term/details column ratio for the inline variant. `33/67` matches the original 1fr 2fr layout. Ignored by the stacked variant. |
title | ReactNode | — | When set, wraps the list in a bordered card with the title rendered in the top row. |
action | ReactNode | — | Right-aligned slot in the title row — typically an Edit/Manage button. |
cardClassName | string | — | Class names applied to the surrounding card (only when `title`/`action` is set). |
className | string | — | Class names applied to the inner `<dl>`. |
DescriptionListItemSpec
| Prop | Type | Default | Description |
|---|---|---|---|
term | ReactNode | — | Renders into a `<dt>` (the descriptor / label). Optional when `icon` is set. |
icon | ReactNode | — | In the `inline`/`stacked` variants, renders a bordered icon square in the term slot instead of the `term` text. In the `list` variant, renders as a status icon between the `term` and `details` (both still shown). Pairs nicely with lucide-react glyphs. |
details | ReactNode | — | Renders into a `<dd>` (the value beside or below the term). |
iconClassName | string | — | Per-row override for the icon container `<dt>` (e.g. recolor the border or background of the icon square). |
termClassName | string | — | Per-row override for the `<dt>` class names. |
detailsClassName | string | — | Per-row override for the `<dd>` class names. |