Data Display
Descriptions
A read-only grid of label/value fields — the detail view for records, settings, and summaries. Data-driven via items; each field can span multiple columns and the grid collapses to a single column on mobile.
Bordered
Set bordered for the classic table look — grid lines and a tinted label cell.
Order #1024
- Customer
- Ada Lovelace
- Order
- #1024
- Status
- Shipped
- ada@analytical.engine
- Phone
- +44 20 7946 0000
- Shipping address
- 12 Analytical Way, London, UK
Import
import { Descriptions } from "@mikenotthepope/substrateui"Plain
Without bordered, fields sit in a borderless grid with muted labels — lighter for inline summaries.
Account
- Customer
- Ada Lovelace
- Order
- #1024
- Status
- Shipped
- ada@analytical.engine
- Phone
- +44 20 7946 0000
- Shipping address
- 12 Analytical Way, London, UK
Vertical layout
Use layout="vertical" to stack each label above its value — handy for wider values and denser column counts.
- Customer
- Ada Lovelace
- Order
- #1024
- Status
- Shipped
- ada@analytical.engine
- Phone
- +44 20 7946 0000
- Shipping address
- 12 Analytical Way, London, UK
Compact + extra
Server
Updated 2m ago
- Region
- us-east-1
- Status
- Healthy
- CPU
- 34%
- Memory
- 5.2 / 16 GB
Accessibility
Descriptions renders a semantic <dl> with <dt>/<dd>pairs, so assistive tech announces each value with its label. It's read-only by design — put interactive controls in the extra slot or alongside the grid.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
items | DescriptionsItem[] | — | The fields to render. Each has label, children (value), optional span and key. |
title | React.ReactNode | — | Heading shown above the grid. |
extra | React.ReactNode | — | Content aligned opposite the title — actions, status, timestamps. |
columns | number | 3 | Columns per row on sm and up (mobile is always one column). |
bordered | boolean | false | Draw grid lines and give labels a tinted cell. |
layout | "horizontal" | "vertical" | "horizontal" | Place the label beside the value (horizontal) or above it (vertical). |
size | "sm" | "md" | "md" | Cell padding density. |
DescriptionsItem
| Prop | Type | Default | Description |
|---|---|---|---|
label | React.ReactNode | — | The field name. |
children | React.ReactNode | — | The field value. |
span | number | 1 | How many columns the field spans (clamped to columns). |
key | React.Key | — | Stable key; falls back to the array index. |