Description list
Facts about one thing as term and value: stacked, inline like a receipt, or a grid of key figures (KeyValueGrid).
Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.
When to use
- A job's details in a side panel.
- A payout's or a tip's breakdown.
- An account's limits as a grid of figures.
When not to use
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { DescriptionList, KeyValueGrid } from "@krizaka/ui/description-list";Examples
Details
A job's status, studio, start and credits.
- Status
- Running
- Studio
- Dubbing · English, Spanish
- Started
- Oct 11, 2026, 14:02by Elena Ruiz
- Credits
- 120estimated, charged at the end
Receipt
layout="inline": where a tip goes.
- Tip from @mina
- $10.00
- Payment fees
- −$0.50
- Platform
- −$1.00
- To you
- $8.50paid on Oct 15
Key figures
KeyValueGrid: an account's limits as cards that wrap.
- Requests / min
- 600
- Concurrent jobs
- 8
- Storage
- 50 GB18 GB used
- Retention
- 30 days
Props
DescriptionList
Term and value pairs — a job's details, a payout's breakdown — stacked, inline like a receipt, or as cards.
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | readonly DescriptionItem[] | — | The pairs, in reading order. |
layout | "grid" | "inline" | "stacked" | — | stacked (default: a details panel) · inline (term left, value right: a receipt, a summary) · grid (cards). |
KeyValueGrid
Key figures as a grid of cards that wraps with the width: a job's numbers, an account's limits.
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | readonly DescriptionItem[] | — | The pairs, in reading order. |
minWidth | number | 10 | The narrowest a card may be before the grid wraps, in rem. Default 10. |
Accessibility
- A
dl: each term (dt) names its value (dd). - On React Native each pair is one element, read as “term, value”.
Best practices
- Keep the terms short and the values formatted (
@krizaka/intl). - Inline for amounts that add up; grid for figures to scan.
Related components
Generated from the code of @krizaka/ui 3.5.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Data table
A table of records on TanStack Table v9 — sort, filters and facets, groups, details, pages, selection, column visibility, pinning and resizing — in the browser or on the server, cards on a phone, windowing for long lists.
Goal gauge
A goal counted in steps — 6 of 10 backers, 3 dares done, 3 seats left: a meter whose reached steps light one by one (or whose spent ones drain) when its chapter plays.