> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/components/descriptions.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt.

# Descriptions

Present object details as labels and values.

## Basic usage


### Project details

ProjectLeaf UIOwnerAlexStatusActiveNotesA consistent interface for the team.

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/descriptions/basic.tsx"
import { Descriptions, Tag } from '@ifhover/leaf-ui';

export function DescriptionsBasic() {
  return (
    <Descriptions
      title="Project details"
      columns={{ xs: 1, md: 2 }}
      items={[
        { key: 'name', label: 'Project', children: 'Leaf UI' },
        { key: 'owner', label: 'Owner', children: 'Alex' },
        { key: 'status', label: 'Status', children: <Tag color="success">Active</Tag> },
        { key: 'note', label: 'Notes', children: 'A consistent interface for the team.', span: 2 },
      ]}
    />
  );
}
```

Expand code

## More examples


PlanProSeats12Renewal2026-12-01

advanced.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/descriptions/advanced.tsx"
import { Descriptions } from '@ifhover/leaf-ui';

export function DescriptionsVertical() {
  return (
    <Descriptions
      layout="vertical"
      bordered
      columns={{ xs: 1, md: 3 }}
      items={[
        { key: 'plan', label: 'Plan', children: 'Pro' },
        { key: 'seats', label: 'Seats', children: 12 },
        { key: 'renew', label: 'Renewal', children: '2026-12-01' },
      ]}
    />
  );
}
```

Expand code

## Usage

Provide field labels and content in items. span controls column spans. Configure columns by viewport width and use layout for horizontal or vertical field arrangement.

## Types

Import these types for data, callbacks and refs.

```ts
import type { DescriptionItem, DescriptionsProps } from '@ifhover/leaf-ui';
```

## DescriptionItem API

| Property   | Type        | Default  | Description                            |
| ---------- | ----------- | -------- | -------------------------------------- |
| `key`      | `string`    | Required | Unique stable identifier               |
| `label`    | `ReactNode` | Required | Display label                          |
| `children` | `ReactNode` | Required | Content or child items                 |
| `span`     | `number`    | —        | Column span; Col span 0 hides a column |

## DescriptionsProps API

| Property   | Type                                                                      | Default        | Description                                           |
| ---------- | ------------------------------------------------------------------------- | -------------- | ----------------------------------------------------- |
| `items`    | [`readonly DescriptionItem[]`](#descriptionitem-api)                      | Required       | Items; keep keys unique and stable                    |
| `title`    | `ReactNode`                                                               | —              | Title content                                         |
| `extra`    | `ReactNode`                                                               | —              | Supplementary content or actions                      |
| `columns`  | `number \| Partial<Record<'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl', number>>` | —              | Columns; unspecified breakpoints inherit smaller ones |
| `layout`   | `'horizontal' \| 'vertical'`                                              | `'horizontal'` | Arrangement of labels and values                      |
| `bordered` | `boolean`                                                                 | `false`        | Show container outline                                |
| `size`     | `'sm' \| 'md' \| 'lg'`                                                    | `'md'`         | Size or spacing preset                                |