Descriptions installs into your project as a file you own. It takes the same props as Ant Design's Descriptions and adds a ref, marked antuikit in the API table below. bordered sets the frame and size the density.
Install
npx antuikit@latest init
npx antuikit@latest add descriptions
The first command sets up AntuikitProvider and the theme, and the second adds this component.
Import
Import from @/components/ui/descriptions, the file the install added to your project, never from antd.
import { Descriptions } from "@/components/ui/descriptions"
The axes
The props that take a fixed set of values. They match the Design tab's Figma properties. column is a count rather than a set of values.
layout takes horizontal (the default) and vertical. Horizontal puts the label beside its value. Vertical puts a row of labels above a row of values, for values long enough that a label beside them wastes half the row.
size takes small, medium and large, and comes from ConfigProvider when unset. size="default" is deprecated and logs a warning, so leave it unset for the large size.
column is how many pairs sit on one row before wrapping. It takes a number or a breakpoint object, and its default is one: { xxxl: 4, xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }. The breakpoints are Ant Design's, so lg starts at 992px, where Tailwind uses 1024.
An item's span takes the same breakpoint object, or filled to take the rest of the row. A numeric span that runs past column is cut to the space left and logs a warning, so use filled to fill a remainder.
Flags
Two booleans, and one of them does nothing while the other is on.
bordered draws the table frame and puts every label in its own shaded <th>. Descriptions has no variant prop, unlike Card and Input.
colon adds a colon after each label and defaults to true. Bordered labels never show one, so colon={false} on a bordered block has no effect.
Slots
The props that take a node. Put your own markup here before reaching for a descendant selector.
title is the block's heading. With neither title nor extra there is no header row, so inside a Card that already has a heading, leave both unset rather than passing an empty string.
extra sits at the end of the header row, opposite the title. Use it for the one action the block offers, like an Edit button or a status Tag.
An item's label and children are slots too. children is the value, and null renders a blank cell, so write the placeholder word instead.
Events
Descriptions has no event props of its own. The API table below lists what it passes to the element it renders.
Styling
classNames and styles take the same keys, one per part. Use them before a descendant selector, because a part with a key keeps its name across updates.
1
<Descriptions
2
classNames={{
3
label: "…",
4
content: "…",
5
root: "…",
6
header: "…",
7
title: "…",
8
extra: "…",
9
}}
10
/>
A Tailwind class on one of these keys overrides the default style without !important. Setting a component token's CSS variable on the root has no effect, so style the part here or change the token in your theme.
API Reference
Descriptions
Descriptions's props. Rows marked antuikit in the Version column are added by the kit.