DescriptionList

DescriptionList shows label / value pairs: order details, a profile, a summary of settings.

DescriptionList is a <dl>; each DescriptionItem is a <dt> and a <dd>. columns is the maximum number of columns: narrow containers drop columns without breakpoints. The inline layout puts label and value on one row; valueAlign end pushes values to the end of the row for totals. copyable adds a button that copies the value, and screen readers hear the item's label with it.

Order ID: ORD-2041
Order date: Oct 27, 2026, 9:10 AM
Customer: Maria Garcia
Email: maria.garcia@example.com
Shipping address: 400 Market Street, Suite 12, San Francisco, CA 94105

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport { DescriptionList, DescriptionItem } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Name: Sam Lee
Role: Admin
Time zone: (UTC+09:00) Osaka, Sapporo, Tokyo
API key: yg_live_51Hc…9QeD

Inline & divided

Label and value on one row with a line between items, for profile and settings pages.

Subtotal: $1,240.00
Shipping: Free
Discount: −$124.00
Total: $1,116.00

Totals

valueAlign end pushes values to the end of the row; the last item is bolder through className.

Usage

Keep labels short, in sentence case, without a colon.
Turn on copyable for values people copy: order numbers, email addresses, API keys.
Use fullWidth for long values (addresses, notes) when there are several columns.

Don't

Don't use DescriptionList for many rows with the same columns. Use Table.
Don't leave a value empty; write “None yet” or a dash with an explanation.

Props

Prop · Type	Default	Description
columns1 \| 2 \| 3 \| 4	Default: 1	Maximum number of columns; narrow containers drop columns.
layout"stacked" \| "inline"	Default: "stacked"	Label above the value, or on the same row.
dividedboolean	Default: false	Line above every item.
valueAlign"start" \| "end"	Default: "start"	end: values at the end of the row (inline layout).
DescriptionItem.labelReactNode	Default: —	Label (<dt>).
DescriptionItem.childrenReactNode	Default: —	Value (<dd>).
DescriptionItem.copyableboolean \| string	Default: —	Copy button: true copies the shown text, a string copies that string.
DescriptionItem.fullWidthboolean	Default: —	Spans the whole row when there are several columns.

Messages

Text built into the component: labels, aria-labels, screen reader announcements.

English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

messages.descriptionList

Key · Type	Default (English)	messagesVi
copystring Tên nút sao chép; trình đọc màn hình đọc kèm nhãn của mục ("Sao chép Mã đơn").	Default (English)`"Copy"`	messagesVi`"Sao chép"`
copiedstring Đọc qua vùng status sau khi sao chép.	Default (English)`"Copied to clipboard"`	messagesVi`"Đã sao chép vào bộ nhớ tạm"`