Description List

Key/value metadata as a real <dl>, so a screen reader announces each term with its value. Columns on wide screens, stacked on narrow ones.

src/components/ui/description-list.tsx

About

From the component's own source, where it was written.

Key/value metadata — the panel that sits beside almost every detail view.

A real <dl>, so the pairing is in the markup rather than implied by a two-column grid. That matters for a screen reader, which announces a term and its description together.

columns lays terms beside values on wide screens and stacks them on narrow ones. Stacking is not a fallback: at phone width a 40/60 split leaves both halves too narrow to read, and a long value wraps into a column an inch wide.

Install

npx astralyx-ui add description-list

Usage

import {
  DescriptionList, DescriptionTerm, DescriptionDetails,
} from '@/components/ui/description-list'

<DescriptionList>
  <DescriptionTerm>Status</DescriptionTerm>
  <DescriptionDetails>Running</DescriptionDetails>
</DescriptionList>

Composer

Change the props and the source below follows.

Environment: Production
Region: eu-west-1
Commit: 4f2a1c9
Status: Healthy

Props

columnsdivided

tsx

<DescriptionList columns={true} divided={false}>
  <DescriptionTerm>Environment</DescriptionTerm>
  <DescriptionDetails>Production</DescriptionDetails>
</DescriptionList>

Examples

Deployment metadata

tsx

<DescriptionList divided>
  <DescriptionTerm>Environment</DescriptionTerm>
  <DescriptionDetails>Production</DescriptionDetails>
  <DescriptionTerm>Region</DescriptionTerm>
  <DescriptionDetails>eu-west-1</DescriptionDetails>
</DescriptionList>

A breakdown that adds up

tsx

<SummaryList
  items={[
    { term: 'Amount', details: '1,250.00 USDT' },
    { term: 'Network fee', details: '1.00 USDT' },
    { term: 'You receive', details: '1,249.00 USDT', strong: true },
  ]}
/>

Facts across a card

tsx

<FactGrid
  items={[
    { term: 'Status', details: <Badge color="green">Healthy</Badge> },
    { term: 'Region', details: 'eu-west-1' },
    { term: 'Instances', details: '12' },
    { term: 'Last deploy', details: '4 minutes ago' },
  ]}
/>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`DescriptionList`

Key/value metadata — the panel that sits beside almost every detail view.

Extends ComponentProps<'dl'>.

Prop	Type	Default	Description
columns	boolean	true	Term beside value from `sm` up. At phone width a split leaves both halves too narrow, so it stacks below that regardless.
divided	boolean	false	Hairline between pairs.

`DescriptionTerm`

Extends ComponentProps<'dt'>.

`DescriptionDetails`

Extends ComponentProps<'dd'>.

`DescriptionPairs`

Convenience wrapper taking items={[{ term, details }]} for a flat list.

Extends ComponentProps<typeof DescriptionList>.

Prop	Type	Default	Description
columns	boolean	true	Term beside value from `sm` up. At phone width a split leaves both halves too narrow, so it stacks below that regardless.
divided	boolean	false	Hairline between pairs.
items	{ term: ReactNode; details: ReactNode }[]	required	—

`SummaryList`

Label left, figure right, one row each — a quote, a fee breakdown. Values end-aligned with tabular digits so amounts line up, two columns at every width, and strong on an item marks the total.

Extends Omit<ComponentProps<'dl'>, 'children'>.

Prop	Type	Default	Description
items	{ term: ReactNode; details: ReactNode; strong?: boolean }[]	required	—

`FactGrid`

A few short facts across the width of a card, each a caption over its value — where a two-column list would fill the left third and leave the rest empty. As many 10rem columns as fit, two on a phone.

Extends Omit<ComponentProps<'dl'>, 'children'>.

Prop	Type	Default	Description
items	{ term: ReactNode; details: ReactNode }[]	required	—