Skip to content
Aback UI

Data Display

Description List

Key and value rows for metadata, breakdowns, and totals, as a real description list.

BetaUsed in Aback ToolsRegistry JSON (opens in a new tab)
Team plan, 5 seats
$145.00
Annual discount
-$29.00
Tax
$0.00
Total due today
$116.00
content-type
text/html; charset=utf-8
cache-control
public, max-age=300
x-frame-options
DENY
strict-transport-security
max-age=63072000

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add description-list

Writes components/ui/description-list.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Usage

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx
import {
  DescriptionList,
  DescriptionListDetails,
  DescriptionListItem,
  DescriptionListTerm,
} from "@/components/ui/description-list";

API reference

Props and composition points for Description List. Native element props pass through.

PropTypeDefaultDescription
DescriptionList borderedbooleantrueDraws the outer border. Turn it off inside a card that already has one.
DescriptionListItem emphasisbooleanfalseA bold row with a heavier rule, for a total.
DescriptionListTerm monobooleanfalseMonospace terms for header names and other technical keys.
DescriptionListDetails tone"neutral" | "success" | "warning" | "danger" | "info""neutral"Colours a value, such as a discount. Keep a sign or a word with it.

Dependencies: no extra packages, plus the shared @/lib/utils helper.

Accessibility

Semantics, keyboard behavior, and the decisions that keep the component operable.

  • It renders dl, dt, and dd, so assistive technology pairs every term with its value.
  • Rows wrap on narrow screens instead of truncating, so long values such as header contents stay readable.
  • Name a standalone list with aria-label when nearby text does not already describe it.
  • Tone is supplementary. A discount reads as -$29.00, not as a green number alone.

Used in production

The Aback products whose interfaces shaped this component.

Related