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

      • 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