# antuikit / Descriptions

> Descriptions. Adds nothing beyond `className` merging through `cn()`.

Docs: https://antuikit.com/docs/components/descriptions

## Install

npx antuikit@latest init
npx antuikit@latest add descriptions

## Import

import { Descriptions } from "@/components/ui/descriptions";

## Demos

- [Basic](https://ui.antuikit.com/embed/descriptions/basic.md): Pass `items` a list of `label` and `children` pairs, and with no `column` set the grid picks a column count for the screen width.
- [Bordered](https://ui.antuikit.com/embed/descriptions/bordered.md): Set `bordered` to draw the pairs as a table, with each label in its own shaded cell.
- [Size](https://ui.antuikit.com/embed/descriptions/size.md): Set `size` to `small`, `medium` or `large` to change the padding around every pair, from a compact panel to a roomy detail page.
- [Column counts](https://ui.antuikit.com/embed/descriptions/column-counts.md): Set `column` to how many pairs sit on a row, as a number or a breakpoint object that drops to one on phones, and the last item stretches to fill a short row.
- [Vertical](https://ui.antuikit.com/embed/descriptions/vertical.md): Set `layout="vertical"` to put each label above its value, which gives long values the full width of their cell.
- [Responsive columns](https://ui.antuikit.com/embed/descriptions/responsive.md): Pass `column` a breakpoint object like `{ xs: 1, sm: 2, xl: 4 }` to change the count per screen width, and give an item's `span` one too.
- [Spanning columns](https://ui.antuikit.com/embed/descriptions/span.md): Set an item's `span` to a number of columns, or to `"filled"` to take whatever is left on its row, like a long notes field.
- [Rich values](https://ui.antuikit.com/embed/descriptions/rich.md): Put any node in an item's `children`, like a Badge or a row of Tags, and a status in `extra` beside the title.
- [Booking details](https://ui.antuikit.com/embed/descriptions/booking-details.md): A one-column booking summary with an icon before each label, no colon, and every value aligned to the right edge.
- [Invoice summary](https://ui.antuikit.com/embed/descriptions/invoice-summary.md): An invoice card with a payment status, a bordered two-column summary, a full-width notes row and the actions to settle it.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/descriptions`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Descriptions` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.