Descriptions
@xui/descriptionsA key/value description list on a responsive grid — set column, switch orientation between inline and stacked, and toggle the bordered table variant.
Install
pnpm add @xui/descriptions Add the barrel to a standalone component's imports:
import { XuiDescriptionsImports } from '@xui/descriptions';
@Component({
imports: [XuiDescriptionsImports],
// …
})Examples
Basic
Loading preview…
<xui-descriptions title="User" [column]="2" class="w-[560px]">
<xui-descriptions-item label="Name">Ada Lovelace</xui-descriptions-item>
<xui-descriptions-item label="Role">Engineer</xui-descriptions-item>
<xui-descriptions-item label="Email">ada@example.com</xui-descriptions-item>
<xui-descriptions-item label="Location">London</xui-descriptions-item>
<xui-descriptions-item label="Bio" [span]="2">First computer programmer; worked on the Analytical Engine.</xui-descriptions-item>
</xui-descriptions>Bordered
Loading preview…
<xui-descriptions title="Order #1024" [column]="3" bordered class="w-[640px]">
<xui-descriptions-item label="Product">Widget Pro</xui-descriptions-item>
<xui-descriptions-item label="Quantity">3</xui-descriptions-item>
<xui-descriptions-item label="Status">Shipped</xui-descriptions-item>
<xui-descriptions-item label="Address" [span]="3">221B Baker Street, London</xui-descriptions-item>
</xui-descriptions>Vertical
Loading preview…
<xui-descriptions orientation="vertical" [column]="3" bordered class="w-[560px]">
<xui-descriptions-item label="Plan">Team</xui-descriptions-item>
<xui-descriptions-item label="Seats">12</xui-descriptions-item>
<xui-descriptions-item label="Renews">2026-08-01</xui-descriptions-item>
</xui-descriptions>API
One label/value entry inside {@link XuiDescriptions}. Its projected content is the value; label is the key and span widens it across grid columns.
Inputs
labelstringThe term this item describes. Project the value as content.''spannumberHow many grid columns this item occupies.1A key/value description list laid out on a grid. Wrap <xui-descriptions-item label="…">value</xui-descriptions-item> entries; column sets how many per row, orientation stacks or inlines the label, and bordered draws a boxed, table-like variant.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''titlestringA heading above the list. Omitted entirely when empty.''columnnumberNumber of items per row.3orientation'horizontal' | 'vertical'Put each label beside its value (horizontal) or above it (vertical). Horizontal labels get a trailing colon unless the list is bordered.'horizontal'borderedbooleanDraw the list as a bordered grid with a filled header, rather than as open rows.false