For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/en/components/descriptions.md.
Leaf UIReact components
GitHub

Descriptions

Present object details as labels and values.

Basic usage

Project details

Project
Leaf UI
Owner
Alex
Status
Active
Notes
A consistent interface for the team.
basic.tsx
import { Descriptions, Tag } from '@ifhover/leaf-ui';

export function DescriptionsBasic() {
  return (
    <Descriptions
      title="Project details"
      columns={{ xs: 1, md: 2 }}
      items={[
        { key: 'name', label: 'Project', children: 'Leaf UI' },
        { key: 'owner', label: 'Owner', children: 'Alex' },
        { key: 'status', label: 'Status', children: <Tag color="success">Active</Tag> },
        { key: 'note', label: 'Notes', children: 'A consistent interface for the team.', span: 2 },
      ]}
    />
  );
}

More examples

Plan
Pro
Seats
12
Renewal
2026-12-01
advanced.tsx
import { Descriptions } from '@ifhover/leaf-ui';

export function DescriptionsVertical() {
  return (
    <Descriptions
      layout="vertical"
      bordered
      columns={{ xs: 1, md: 3 }}
      items={[
        { key: 'plan', label: 'Plan', children: 'Pro' },
        { key: 'seats', label: 'Seats', children: 12 },
        { key: 'renew', label: 'Renewal', children: '2026-12-01' },
      ]}
    />
  );
}

Usage

Provide field labels and content in items. span controls column spans. Configure columns by viewport width and use layout for horizontal or vertical field arrangement.

Types

Import these types for data, callbacks and refs.

import type { DescriptionItem, DescriptionsProps } from '@ifhover/leaf-ui';

DescriptionItem API

PropertyTypeDefaultDescription
keystringRequiredUnique stable identifier
labelReactNodeRequiredDisplay label
childrenReactNodeRequiredContent or child items
spannumber—Column span; Col span 0 hides a column

DescriptionsProps API

PropertyTypeDefaultDescription
itemsreadonly DescriptionItem[]RequiredItems; keep keys unique and stable
titleReactNode—Title content
extraReactNode—Supplementary content or actions
columnsnumber | Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>>—Columns; unspecified breakpoints inherit smaller ones
layout'horizontal' | 'vertical''horizontal'Arrangement of labels and values
borderedbooleanfalseShow container outline
size'sm' | 'md' | 'lg''md'Size or spacing preset