Data

Descriptions

Key-value description list rendered as a semantic dl grid with configurable columns, spans, borders and horizontal or vertical label layout.

Import

import { Descriptions } from "@zephora/react";

Examples

Basic

Order details

Order no.: ZR-10482
Status: Shipped
Payment: Credit card
Customer: Ada Lovelace
Shipping address: 12 Analytical Way, London

const items: DescriptionsItem[] = [
  { label: "Order no.", content: "ZR-10482" },
  { label: "Status", content: "Shipped" },
  { label: "Payment", content: "Credit card" },
  { label: "Customer", content: "Ada Lovelace" },
  { label: "Shipping address", content: "12 Analytical Way, London", span: 2 },
];

<Descriptions title="Order details" items={items} columns={3} />

Bordered and vertical

`bordered` draws cell borders; the vertical layout stacks each label above its content.

Order details

Order no.: ZR-10482
Status: Shipped
Payment: Credit card
Customer: Ada Lovelace
Shipping address: 12 Analytical Way, London

<Descriptions
  items={items}
  columns={2}
  layout="vertical"
  bordered
  size="sm"
  extra={<Button size="sm" variant="outline">Edit</Button>}
  title="Order details"
/>

API

Descriptions props

Prop	Type	Default	Description
`items` *	`DescriptionsItem[]`	—	Key/value pairs to display.
`columns`	`number`	`3`	Number of grid columns.
`layout`	`"horizontal" \| "vertical"`	`"horizontal"`	Label beside content (horizontal) or above it (vertical).
`bordered`	`boolean`	`false`	Draws cell borders around every item.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Density scale.
`title`	`ReactNode`	—	Heading rendered above the list.
`extra`	`ReactNode`	—	Extra content aligned to the end of the header row (actions…).
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.

DescriptionsItem props

Prop	Type	Default	Description
`label` *	`ReactNode`	—	Term rendered in the `<dt>`.
`content` *	`ReactNode`	—	Detail rendered in the `<dd>`.
`span`	`number`	`1`	How many columns this item spans (clamped to `columns`).