Layout
Descriptions
Display read-only key-value data in a structured grid — useful for detail pages and record summaries.
User Info
Library Info
Installation
npx benflux-ui add descriptionsUsage
import { Descriptions, DescriptionsItem } from "@benflux-ui/react"
<Descriptions title="Order Details" bordered column={2}>
<DescriptionsItem label="Order ID">#2024-001</DescriptionsItem>
<DescriptionsItem label="Status">Shipped</DescriptionsItem>
<DescriptionsItem label="Customer">Alice Martin</DescriptionsItem>
<DescriptionsItem label="Total">$129.00</DescriptionsItem>
<DescriptionsItem label="Note" span={2}>
Handle with care
</DescriptionsItem>
</Descriptions>Props — Descriptions
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | Title shown above the descriptions grid |
| column | number | 3 | Number of columns in the grid |
| bordered | boolean | false | Adds borders between cells |
| size | "default" | "sm" | "lg" | "default" | Cell padding size |
| layout | "horizontal" | "vertical" | "horizontal" | Label placement relative to value |
Props — DescriptionsItem
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | ReactNode | — | The key label |
| span | number | 1 | Number of columns this item spans |