Description list
Aligns semantic labels and values in a responsive description list.
Preview
- Name
- Untitled
- Status
- Ready
In action
- Estimated range
- 386 km
- Battery
- 84%
When to use
Use it for
- Read-only properties, specifications, and account details.
Not for
- Editable properties; use PropertyGrid.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { DescriptionList } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/description-list.
2. Vendor the source
npx @noorddev/vlak-cli add description-list
The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/description-list.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { DescriptionList } from "@noorddev/vlak-react";
<DescriptionList items={[{ id: "range", label: "Estimated range", value: "386 km" }, { id: "battery", label: "Battery", value: "84%" }]} />Props
DescriptionList
Aligned, semantic labels and values without an extra card.
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | DescriptionItem[] |
Also accepts HTMLAttributes<HTMLDListElement>.
Keyboard
| Keys | Does |
|---|---|
| Tab, Enter, Space | Links or controls supplied as values keep their native keyboard behavior. |
Accessibility
- Uses dl, dt, and dd; labels and values remain in reading order on small screens.
Markup
<dl class="rs-description-list"><div class="rs-description-list-row"><dt class="rs-description-list-label">Estimated range</dt><dd class="rs-description-list-value">386 km</dd></div></dl>
Classes
.rs-description-list.rs-description-list-row.rs-description-list-label.rs-description-list-value