Descriptions

FreeNew

Read-only label and value pairs in a responsive grid with column spans, a bordered table look, a title and an extra slot, rendered as a description list.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

layout

bordered

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac/descriptions

Usage

import { Descriptions } from "@/components/ui/descriptions"

<Descriptions
  bordered
  columns={3}
  title="Subscription"
  items={[
    { label: "Customer", value: "Northwind Traders" },
    { label: "Plan", value: "Team, billed yearly" },
    { label: "Billing address", value: "221B Baker Street", span: 3 },
  ]}
/>

Props

Prop	Type	Default	Description
`items`	`{ label, value, span?, key? }[]`	`-`	The pairs.
`title`	`ReactNode`	`-`	Heading above the list.
`extra`	`ReactNode`	`-`	Content on the opposite side of the title.
`columns`	`1 \| 2 \| 3 \| 4`	`3`	Columns on wide containers.
`layout`	`"horizontal" \| "vertical"`	`"horizontal"`	Label beside or above the value.
`bordered`	`boolean`	`false`	Cell borders and tinted labels.

Accessibility

Role: term/definition.

Uses dl, dt and dd so assistive technology pairs each term with its details.
Columns collapse by container width, not viewport width, so it works inside narrow panels.
Spans are clamped to the column count.

Keyboard

Not interactive: content is read in order.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac/descriptions

Usage

import { Descriptions } from "@/components/ui/descriptions"

<Descriptions
  bordered
  columns={3}
  title="Subscription"
  items={[
    { label: "Customer", value: "Northwind Traders" },
    { label: "Plan", value: "Team, billed yearly" },
    { label: "Billing address", value: "221B Baker Street", span: 3 },
  ]}
/>

Props

Prop	Type	Default	Description
`items`	`{ label, value, span?, key? }[]`	`-`	The pairs.
`title`	`ReactNode`	`-`	Heading above the list.
`extra`	`ReactNode`	`-`	Content on the opposite side of the title.
`columns`	`1 \| 2 \| 3 \| 4`	`3`	Columns on wide containers.
`layout`	`"horizontal" \| "vertical"`	`"horizontal"`	Label beside or above the value.
`bordered`	`boolean`	`false`	Cell borders and tinted labels.

Accessibility

Role: term/definition.

Uses dl, dt and dd so assistive technology pairs each term with its details.
Columns collapse by container width, not viewport width, so it works inside narrow panels.
Spans are clamped to the column count.

Keyboard

Not interactive: content is read in order.