Description list

A React component in Beamline's Content & display category.

The details of one record as label and value pairs: beside each other or stacked, in as many columns as the room holds; a copy button arrives on the row you point at, long values fold behind Show more, a value that changes lights once, and a value never recorded is hatched, never blank or zero.

Use it for

The fields of one record on its page or in a side panel: a customer, an invoice, an API key, a deployment, an order.
Settings or metadata read more than edited, with ids people copy.

Not for

Many records with the same fields (table or data-grid).
Editing several fields at once (a form).
A few headline numbers with trends (metric-card).

Anatomy

root (a dl; optional title, description and actions above it)
row: label (with an optional hint glyph and tooltip) and value
copy button at the row's end, arriving with attention
unmeasured value: a hatched chip saying “Not recorded”
Show more / Show less under a long value

Variants

0: orientation: horizontal (label beside value; stacks by itself under 24rem) · vertical (label above value)
1: columns: auto (as many as fit at 20rem each) · 1 · 2 · 3
2: density: compact · default · comfortable
3: divided: hairlines between rows (default) or none
4: per item: mono (ids, keys, hashes), wide (takes the whole row), copy, hint

States

loading (label and value skeletons in the same rows)
not recorded (null or undefined value: hatched, read as “not recorded”)
long value folded (clamped to `clamp` lines) and opened
copied (the row's button says Copied)
changed (a value that differs from the last render lights once)

Keyboard

Tab reaches each copy button, hint and Show more in reading order; values with their own controls keep them
The copy button is laid out at rest, so focus never lands on something that moves

Motion

A copy button arrives with the row's hover or focus (the shared reveal: in at once, out over the departure). A value that changes lights with the accent tint and fades over three standard durations. Show more eases the value's height open and closed (the shared height morph). Reduced motion keeps the tint as a still mark for a moment and opens at once.

Props

Prop	Type	Default	Description
`items` (required)	`DescriptionItem[]`	—	{ label, value, key?, copy?, hint?, mono?, wide? }; value is any node; null or undefined reads as not recorded.
`orientation`	`"horizontal" \| "vertical"`	—	Label beside or above its value. Default horizontal.
`columns`	`"auto" \| 1 \| 2 \| 3`	—	Default auto: as many as the room holds at 20rem each.
`density`	`"compact" \| "default" \| "comfortable"`	—	Row padding.
`divided`	`boolean`	—	Hairlines between rows. Default true.
`clamp`	`number`	—	Lines a long text value shows before Show more. Default 3.
`unmeasuredLabel`	`string`	—	What a missing value says. Default "Not recorded".
`title / description / actions`	`ReactNode`	—	An optional heading row above the list.
`loading`	`boolean`	—	Skeleton rows: the labels you passed stay, values wait.
`className / classNames / style / ref`	`string / DescriptionListClassNames / CSSProperties / Ref<HTMLDivElement>`	—	The root and its parts (header, list, item, label, value, copy, more).

Dependencies

lucide-react

Import

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

Get it

Description list is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent