Description list

Renders a list of name/value pairs — perfect for review screens, summary cards, and metadata blocks.

Invoice Number: INV-12345
Invoice Date: September 21, 2024
Due Date: October 21, 2024
Customer Name: John Doe
Total Amount: $1,250.00
Status: Pending

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/description-list.json

Usage

Pass an `items` array. Use `title` + `action` to wrap the list in a bordered review card.

TSImport

import { DescriptionList } from "@/components/ui/description-list";

TSExample

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" },
      ]}
    />
  );
}

Composition

Anatomy of the DescriptionList component.

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.

Stacked

Term above details. Same shape the multi-step form's auto-generated review screen uses.

Full name: Jacob Vendramin
Email: jacob@churchmediasquad.com
Phone: +1 (555) 010-2024
Role: Senior staff engineer

Inline

Two-column grid — terms left, details right, baselines aligned.

Invoice Number: INV-12345
Invoice Date: September 21, 2024
Due Date: October 21, 2024
Customer Name: John Doe
Total Amount: $1,250.00
Status: Pending

List

A divider-free record list. Terms form an aligned left rail and an optional status `icon` sits between the term and the value — ideal for scannable ID/title rows like an issue tracker. Unlike the icon-only variants, the `icon` here is shown alongside the `term`, not in place of it.

SIS-10238: [Form Error] api/submit failing
SIS-8907: Dynamic Forms PRF testing
SIS-10100: Modify event graphic design
SIS-9685: Feedback UI
Project: SquadSDK
SIS-9868: [Fillout] Error with your form
SIS-9971: Review automation oversight

Icons

Pass an `icon` per item instead of a `term`. The icon renders in a bordered square in the term slot — useful for compact metadata rows where the label is implicit.

: Jacob Vendramin
: jacob@churchmediasquad.com
: +1 (555) 010-2024
: Senior staff engineer
: Nashville, TN

Icons (stacked)

Same icon-per-row pattern, but the stacked variant lays the icon and value side-by-side in a single flex row.

: Jacob Vendramin
: jacob@churchmediasquad.com
: +1 (555) 010-2024
: Senior staff engineer

Emojis

`icon` accepts any ReactNode — pass an emoji string for a zero-dependency, expressive metadata row.

👤: Jacob Vendramin
📧: jacob@churchmediasquad.com
📱: +1 (555) 010-2024
💼: Senior staff engineer
📍: Nashville, TN

Emojis (stacked)

Same emoji-as-icon trick on the stacked variant — the emoji and value sit on a single flex row.

🎬: Brand kit + flyer
🗓️: Due May 1, 2026
🎨: Warm gradient palette, serif headings
🔥: High priority

Review card

Pass `title` + `action` and the list wraps in a bordered card with an inline header — drop in for review/summary screens.

Personal info

Full name: Jacob Vendramin
Project type: Brand kit + flyer
Deadline: May 1, 2026
Notes: Prefer warm gradient palette and serif headings.

Review card (inline rows)

Same bordered review card, but the rows render in the two-column inline layout (term left, details right). Pass `variant="inline"` together with `title` + `action`.

Invoice details

Invoice Number: INV-12345
Invoice Date: September 21, 2024
Due Date: October 21, 2024
Customer: John Doe
Total: $1,250.00
Status: Pending

Project metadata

A flat multi-column grid of label+value rows — no dividers, no card chrome on the list itself. Set `columns` (1–3, default 2) and items fill column-major; `rows` overrides how many rows each column gets. Each item accepts an optional `icon` rendered before the `term` text — omitting it renders the label flush with no spacer. The `details` slot accepts any ReactNode, so you can drop in SDK editors (Badge selects, DatePicker, Avatar groups, DurationInput popovers, or any custom control) for a ClickUp-style inline-editable task metadata panel.

Status
Dates
Time estimate
Tags
Assignees
Priority
Track time

API Reference

Props exposed by the DescriptionList component.

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.