Description ListNew

Terms and their values: a record's details, a summary, an invoice's totals.

$ pnpm dlx shadcn@latest add @dashral/description-list

Customer: Maya Pratama
Email: maya@driftbox.example
Plan: Team
Billing address: Jl. Sudirman 21, Jakarta 10220, Indonesia
Tax ID

Installation

$ pnpm dlx shadcn@latest add @dashral/description-list

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/description-list.json

Usage

example.tsx

1import { DescriptionList } from "@/components/dashral/description-list"
2
3<DescriptionList
4  items={[
5    { term: "Customer", description: customer.name },
6    { term: "Email", description: customer.email },
7    { term: "Tax ID", description: customer.taxId },
8  ]}
9/>

Using the npm package? Import from @dashral/ui/components/description-list instead, here and in the examples; the rest is the same.

Examples

Totals

layout="justified" puts the value at the far end; divided adds lines.

Subtotal: $1,240.00
Discount (10%): −$124.00
Tax (11%): $122.76
Total: $1,238.76

In columns

layout="stacked" with columns; span="full" takes a whole row.

api-sin1-02

Status: Healthy
Region: Singapore (sin1)
Uptime: 99.98% · 30 days
CPU: 2 vCPU
Memory: 4 GB
Last deploy: Nov 5, 14:20
Notes: Takes the Asia traffic; fails over to api-syd1-01.

API reference

DescriptionList

Also takes every prop of <dl>(opens in a new tab).

Prop	Type	Default
`items`	`{ term, description?, span?: "full", key? }[]` The terms and values. Required.	—
`layout`	`"inline" \| "justified" \| "stacked"` The term beside the value, at either end, or above it.	`"inline"`
`columns`	`1 \| 2 \| 3 \| 4` With stacked: side by side from the sm breakpoint (one on phones).	`1`
`divided`	`boolean` Lines between the items.	`false`
`termWidth`	`string` With inline: the term column's width.	`"8rem"`
`size`	`"sm" \| "default"` sm for dense panels.	`"default"`
`empty`	`ReactNode` In place of an empty value.	`a muted dash`
`classNames`	`{ item, term, description }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Accessibility

A real <dl>, with each <dt> and <dd> in a <div>, so screen readers read each value with its term.
The dash for an empty value is hidden from screen readers.