TkxDescriptions

Plain <dl> grid

User Info

Name:: Ada Lovelace
Email:: ada@example.com
Role:: Admin
Team:: Platform
Location:: London
Joined:: 10 Dec 1815
Bio:: Wrote the first published algorithm intended for a machine.

A read-only key/value detail list — the “view record” screen every admin/CRUD app hand-rolls. Feed it an items array and it lays labels and values out on a column grid, as either a semantic <dl> (default) or a bordered <table> with proper <th scope="row"> label cells.

import { TkxDescriptions } from 'tekivex-ui';

<TkxDescriptions
  title="User Info"
  extra={<TkxButton size="sm">Edit</TkxButton>}
  items={[
    { key: 'name', label: 'Name', children: 'Ada Lovelace' },
    { key: 'email', label: 'Email', children: 'ada@example.com' },
    { key: 'role', label: 'Role', children: 'Admin' },
    { key: 'bio', label: 'Bio', children: 'First programmer.', span: 3 },
  ]}
/>

Item shape

Each entry in items:

Field	Type	Description
`label`	`ReactNode`	The key / field name. Strings are sanitized.
`children`	`ReactNode`	The value. Strings are sanitized; nodes render as-is.
`key`	`string`	Optional stable React key (falls back to index).
`span`	`number`	Columns this item stretches across. Default 1.

Plain vs bordered

The default renders a <dl>/<dt>/<dd> list on a CSS grid — light, no lines, labels in textMuted:

<TkxDescriptions items={items} column={2} />

bordered + size='small'

User Info

User Info
Name	Ada Lovelace	Email	ada@example.com
Role	Admin	Team	Platform
Location	London	Joined	10 Dec 1815
Bio	Wrote the first published algorithm intended for a machine.

bordered switches to a real <table>: label cells are <th scope="row"> with a surfaceAlt background, value cells are <td>, and everything sits on a border-token grid. When title is set, the table also gets a visually-hidden <caption> for assistive tech.

<TkxDescriptions items={items} bordered size="small" />

Layout & colon

layout='vertical'

Name	Email
Ada Lovelace	ada@example.com
Role	Team
Admin	Platform

layout="horizontal" (default) puts the label beside the value and appends a : after each label in the plain variant; colon={false} removes it. layout="vertical" stacks the label above the value (never shows a colon).

<TkxDescriptions items={items} layout="vertical" bordered />

Responsive columns

column takes a number (default 3) or a breakpoint map:

<TkxDescriptions items={items} column={{ xs: 1, sm: 2, lg: 4 }} />

The map resolves via window.matchMedia (sm ≥ 576px, md ≥ 768px, lg ≥ 992px); during SSR the largest defined breakpoint value is used, then the client corrects after mount.

Props

Prop	Type	Default	Description
`items`	`TkxDescriptionsItem[]`	`[]`	The key/value entries.
`title`	`ReactNode`	—	Header title above the list.
`extra`	`ReactNode`	—	Right-aligned header slot (e.g. an Edit button).
`column`	`number \| { xs?, sm?, md?, lg? }`	`3`	Columns per row, fixed or responsive.
`bordered`	`boolean`	`false`	Render as a bordered `<table>` grid.
`layout`	`'horizontal' \| 'vertical'`	`'horizontal'`	Label beside vs above the value.
`size`	`'small' \| 'middle' \| 'large'`	`'middle'`	Cell padding scale.
`colon`	`boolean`	`true`	Append `:` to labels (horizontal, non-bordered).
`labelStyle`	`CSSProperties`	—	Extra styles for every label cell.
`contentStyle`	`CSSProperties`	—	Extra styles for every value cell.
`className` / `style`	—	—	Applied to the root element.

The component forwards its ref to the root <div>.