DescriptionList
Pairs of labels and values.
import { DescriptionList } from "@flinbu/seed";Horizontal and grid
- Token
- bg-accent-solid
- Light
- #2563EB
- Used by
- 14 components
- Owner
- –
- Version
- v2.4.0
- Published
- Oct 17, 2026
- Tokens
- 446
import { DescriptionList, Stack } from "@flinbu/seed";
<Stack gap="lg" className="w-full max-w-xl">
<DescriptionList items={[{ term: "Token", description: "bg-accent-solid", mono: true, copy: true }, { term: "Light", description: "#2563EB", mono: true, copy: true }, { term: "Used by", description: "14 components" }, { term: "Owner" }]} />
<DescriptionList layout="grid" items={[{ term: "Version", description: "v2.4.0" }, { term: "Published", description: "Oct 17, 2026" }, { term: "Tokens", description: "446" }]} />
</Stack>Use it for
- A token's details, a version's metadata, read-only settings.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { term, description?, mono?, copy? }[] | – | The pairs. |
layout | 'horizontal''vertical''grid' | 'horizontal' | Stacks on small screens. |
columns | 234 | 3 | For grid. |
dense | boolean | – | No dividers, tighter rows. |
Accessibility
- A real dl; empty values show a dash; copy buttons appear on hover and focus.