@kit-ng-ui/descriptions

Key/value description list for Kit UI. Mirrors ant-design's <Descriptions>.

Install

pnpm add @kit-ng-ui/descriptions @kit-ng-ui/core

Styles

@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/descriptions/styles' as descriptions;

Use

import { KitDescriptionsComponent } from '@kit-ng-ui/descriptions';

@Component({
  standalone: true,
  imports: [KitDescriptionsComponent],
  template: `
    <kit-descriptions
      title="User info"
      [bordered]="true"
      [items]="[
        { label: 'Name',  value: 'Alice' },
        { label: 'Email', value: '[email protected]', span: 2 },
        { label: 'Role',  value: 'Admin' },
        { label: 'Bio',   value: 'Loves coffee.', span: 3 },
      ]"
    />

    <kit-descriptions layout="vertical" [column]="4" [items]="metrics" />
  `,
})
export class Demo {}

API

| Input | Type | Default | Description | | ---------- | ------------------------------------------ | -------------- | -------------------------------------------------------------------------- | | items | Array<{ label, value, span? }> | [] | Cells in display order. | | title | string | '' | Heading above the list. | | extra | string | '' | Right-aligned header content (also accepts [desc-extra] projected slot). | | column | number | 3 | Cells per row (overflow items wrap to the next row). | | size | 'small' \| 'middle' \| 'default' | 'default' | Cell padding density. | | layout | 'horizontal' \| 'vertical' | 'horizontal' | vertical stacks labels above values. | | bordered | boolean | false | Table-style grid with borders. | | colon | boolean | true | Add trailing colon after labels in non-bordered layout. |

Behaviour notes

• The last item in a row stretches to fill any unused column space, matching ant-design's grid behaviour.
• span clamps to column so a single oversized item still fits.
• For dynamic content blocks inside a value, pre-format it into a string before passing to items — the renderer is text-only by design (this matches the column-based grid layout).