Skip to content
AsterUI v0.12.76

Descriptions

Display key-value pairs in a structured, readable format.

Import

Section titled “Import”
import { Descriptions } from 'asterui'

Examples

Section titled “Examples”

Basic Descriptions

Simple key-value display.

NameJohn DoeEmailjohn@example.comPhone+1 234 567 890
LocationSan Francisco, CAStatusActive
 
import { Descriptions } from 'asterui'

function App() {
  const items = [
    { key: 'name', label: 'Name', children: 'John Doe' },
    { key: 'email', label: 'Email', children: 'john@example.com' },
    { key: 'phone', label: 'Phone', children: '+1 234 567 890' },
    { key: 'location', label: 'Location', children: 'San Francisco, CA' },
    { key: 'status', label: 'Status', children: 'Active' },
  ]
  
  return (
      <Descriptions items={items} />
    )
}

export default App

Bordered

Descriptions with borders.

Order Details
Order Details
ProductAsterUI ProPrice$99.00Quantity2
Total$198.00
 
import { Descriptions } from 'asterui'

function App() {
  const items = [
    { key: 'product', label: 'Product', children: 'AsterUI Pro' },
    { key: 'price', label: 'Price', children: '$99.00' },
    { key: 'quantity', label: 'Quantity', children: '2' },
    { key: 'total', label: 'Total', children: '$198.00' },
  ]
  
  return (
      <Descriptions items={items} bordered title="Order Details" />
    )
}

export default App

Sizes

Different size variants.

Small
Small
NameJane SmithRoleEngineerTeamFrontend
Medium
Medium
NameJane SmithRoleEngineerTeamFrontend
Large
Large
NameJane SmithRoleEngineerTeamFrontend
 
import { Descriptions, Space } from 'asterui'

function App() {
  const items = [
    { key: 'name', label: 'Name', children: 'Jane Smith' },
    { key: 'role', label: 'Role', children: 'Engineer' },
    { key: 'team', label: 'Team', children: 'Frontend' },
  ]
  
  return (
      <Space direction="vertical" size="lg" className="w-full">
        <Descriptions items={items} size="sm" bordered title="Small" />
        <Descriptions items={items} size="md" bordered title="Medium" />
        <Descriptions items={items} size="lg" bordered title="Large" />
      </Space>
    )
}

export default App

Title with Extra

Title and extra content in the header.

User Profile
User Profile
NameJohn DoeEmailjohn@example.comStatus
Active
 
import { Descriptions, Button, Badge } from 'asterui'

function App() {
  const items = [
    { key: 'name', label: 'Name', children: 'John Doe' },
    { key: 'email', label: 'Email', children: 'john@example.com' },
    { key: 'status', label: 'Status', children: <Badge color="success">Active</Badge> },
  ]
  
  return (
      <Descriptions
        items={items}
        bordered
        title="User Profile"
        extra={<Button size="sm">Edit</Button>}
      />
    )
}

export default App

Vertical Layout

Vertical label and content layout.

CreatedUpdatedAuthor
2024-01-15 10:30:002024-01-20 14:45:00Jane Smith
 
import { Descriptions } from 'asterui'

function App() {
  const items = [
    { key: 'created', label: 'Created', children: '2024-01-15 10:30:00' },
    { key: 'updated', label: 'Updated', children: '2024-01-20 14:45:00' },
    { key: 'author', label: 'Author', children: 'Jane Smith' },
  ]
  
  return (
      <Descriptions items={items} layout="vertical" bordered />
    )
}

export default App

Custom Columns

Control the number of columns.

NameAlice JohnsonAge28
GenderFemaleOccupationSoftware Engineer
DepartmentEngineeringStart Date2022-03-15
 
import { Descriptions } from 'asterui'

function App() {
  const items = [
    { key: 'name', label: 'Name', children: 'Alice Johnson' },
    { key: 'age', label: 'Age', children: '28' },
    { key: 'gender', label: 'Gender', children: 'Female' },
    { key: 'occupation', label: 'Occupation', children: 'Software Engineer' },
    { key: 'department', label: 'Department', children: 'Engineering' },
    { key: 'start-date', label: 'Start Date', children: '2022-03-15' },
  ]
  
  return (
      <Descriptions items={items} column={2} bordered />
    )
}

export default App

Responsive Columns

Columns adjust based on viewport width.

Resize window to see columns change
Resize window to see columns change
Field 1Value 1Field 2Value 2Field 3Value 3
Field 4Value 4Field 5Value 5Field 6Value 6
 
import { Descriptions } from 'asterui'

function App() {
  const items = [
    { key: 'field1', label: 'Field 1', children: 'Value 1' },
    { key: 'field2', label: 'Field 2', children: 'Value 2' },
    { key: 'field3', label: 'Field 3', children: 'Value 3' },
    { key: 'field4', label: 'Field 4', children: 'Value 4' },
    { key: 'field5', label: 'Field 5', children: 'Value 5' },
    { key: 'field6', label: 'Field 6', children: 'Value 6' },
  ]
  
  return (
      <Descriptions
        items={items}
        bordered
        column={{ xs: 1, sm: 2, md: 3, lg: 4 }}
        title="Resize window to see columns change"
      />
    )
}

export default App

With Column Span

Items spanning multiple columns.

NameProduct XSKUPRD-12345CategoryElectronics
DescriptionA detailed product description that spans multiple columns for better readability.
 
import { Descriptions } from 'asterui'

function App() {
  const items = [
    { key: 'name', label: 'Name', children: 'Product X' },
    { key: 'sku', label: 'SKU', children: 'PRD-12345' },
    { key: 'category', label: 'Category', children: 'Electronics' },
    { key: 'description', label: 'Description', children: 'A detailed product description that spans multiple columns for better readability.', span: 3 },
  ]
  
  return (
      <Descriptions items={items} bordered />
    )
}

export default App

Filled Span

Items that fill the remaining row space.

NameJohn DoeNotesThis field fills the remaining space in the row.
Emailjohn@example.comPhone+1 234 567 890Address123 Main St, San Francisco, CA 94102
 
import { Descriptions } from 'asterui'

function App() {
  const items = [
    { key: 'name', label: 'Name', children: 'John Doe' },
    { key: 'notes', label: 'Notes', children: 'This field fills the remaining space in the row.', span: 'filled' as const },
    { key: 'email', label: 'Email', children: 'john@example.com' },
    { key: 'phone', label: 'Phone', children: '+1 234 567 890' },
    { key: 'address', label: 'Address', children: '123 Main St, San Francisco, CA 94102', span: 'filled' as const },
  ]
  
  return (
      <Descriptions items={items} bordered />
    )
}

export default App

No Colon

Hide the colon after labels.

Field OneValue OneField TwoValue TwoField ThreeValue Three
 
import { Descriptions } from 'asterui'

function App() {
  const items = [
    { key: 'field1', label: 'Field One', children: 'Value One' },
    { key: 'field2', label: 'Field Two', children: 'Value Two' },
    { key: 'field3', label: 'Field Three', children: 'Value Three' },
  ]
  
  return (
      <Descriptions items={items} colon={false} bordered />
    )
}

export default App

Custom Styles

Apply custom styles and classes to semantic parts.

Custom Styled
Custom Styled
NameJane DoeHighlightedThis item has custom stylesStatusActive
 
import { Descriptions } from 'asterui'

function App() {
  const items = [
    { key: 'name', label: 'Name', children: 'Jane Doe' },
    { key: 'highlight', label: 'Highlighted', children: 'This item has custom styles', labelClassName: 'text-primary', contentClassName: 'text-accent font-bold' },
    { key: 'status', label: 'Status', children: 'Active' },
  ]
  
  return (
      <Descriptions
        items={items}
        bordered
        styles={{
          label: { backgroundColor: 'oklch(var(--b2))' },
          content: { backgroundColor: 'oklch(var(--b1))' },
        }}
        classNames={{
          title: 'text-primary',
        }}
        title="Custom Styled"
      />
    )
}

export default App

Compound Pattern

Use Descriptions.Item children instead of items prop.

Using Compound Pattern
Using Compound Pattern
NameJohn DoeEmailjohn@example.comPhone+1 234 567 890
Address123 Main Street, San Francisco, CA 94102
 
import { Descriptions } from 'asterui'

function App() {
  const { Item } = Descriptions
  
  return (
      <Descriptions bordered title="Using Compound Pattern">
        <Item key="name" label="Name">John Doe</Item>
        <Item key="email" label="Email">john@example.com</Item>
        <Item key="phone" label="Phone">+1 234 567 890</Item>
        <Item key="address" label="Address" span={3}>
          123 Main Street, San Francisco, CA 94102
        </Item>
      </Descriptions>
    )
}

export default App

API

Section titled “API”

Descriptions

Section titled “Descriptions”
PropertyDescriptionTypeDefault
itemsDescription items (alternative to children)DescriptionsItemConfig[]-
titleTitle of the descriptions blockReact.ReactNode-
extraExtra content in the top-right cornerReact.ReactNode-
columnNumber of columns (or responsive config)number | { xs?, sm?, md?, lg?, xl?, 2xl? }3
borderedShow borders around cellsbooleanfalse
layoutLayout direction'horizontal' | 'vertical''horizontal'
sizeSize variant'sm' | 'md' | 'lg''md'
colonShow colon after labelsbooleantrue
stylesSemantic styles for component partsPartial<Record<SemanticDOM, CSSProperties>>-
classNamesSemantic classNames for component partsPartial<Record<SemanticDOM, string>>-
labelStyleDefault label styles (deprecated, use styles.label)React.CSSProperties-
contentStyleDefault content styles (deprecated, use styles.content)React.CSSProperties-
classNameAdditional CSS classesstring-
styleInline styles for root elementReact.CSSProperties-
data-testidTest ID for the componentstring'descriptions'

DescriptionsItemConfig

Section titled “DescriptionsItemConfig”
PropertyDescriptionTypeDefault
keyUnique key for the item (used for test IDs and React keys)string-
labelLabel for the itemReact.ReactNode-
childrenContent of the itemReact.ReactNode-
spanNumber of columns to span, or ‘filled’ to fill remaining spacenumber | 'filled'1
labelStyleCustom label stylesReact.CSSProperties-
contentStyleCustom content stylesReact.CSSProperties-
labelClassNameCustom label classstring-
contentClassNameCustom content classstring-

Descriptions.Item (compound)

Section titled “Descriptions.Item (compound)”
PropertyDescriptionTypeDefault
keyReact key, extracted by parentstring-
itemKeyExplicit key (alternative to React key)string-
labelLabel for the itemReact.ReactNode-
childrenContent of the itemReact.ReactNode-
spanNumber of columns to span, or ‘filled’number | 'filled'1
labelStyleCustom label stylesReact.CSSProperties-
contentStyleCustom content stylesReact.CSSProperties-
labelClassNameCustom label classstring-
contentClassNameCustom content classstring-

SemanticDOM keys

Section titled “SemanticDOM keys”
PropertyDescriptionType
rootRoot container element-
headerHeader containing title and extra-
titleTitle element-
extraExtra content element-
tableTable element-
labelLabel cells (th elements)-
contentContent cells (td elements)-

Accessibility

Section titled “Accessibility”
  • Uses semantic <table> markup for proper structure
  • Header cells use scope attribute for screen readers
  • Table has <caption> element (visually hidden) when title is provided
  • Content cells have aria-labelledby linking to their labels
  • Colons after labels are marked with aria-hidden to avoid redundant announcements