Command Menu

Search documentation, components, and switch theme.

Atoms

Description List

A description list and row layout for key-value pairs.

Formance
Docs

Installation#

npx shadcn@latest add @formance/description-list

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  DescriptionList,
  DescriptionTerm,
  DescriptionDetails,
} from '@/components/ui/description-list'
<DescriptionList>
  <DescriptionTerm>Transaction ID</DescriptionTerm>
  <DescriptionDetails>txn_01HQXK9ZV3...</DescriptionDetails>
  <DescriptionTerm>Amount</DescriptionTerm>
  <DescriptionDetails>1,250.00 USD</DescriptionDetails>
  <DescriptionTerm>Status</DescriptionTerm>
  <DescriptionDetails>Committed</DescriptionDetails>
</DescriptionList>

Compound Components

Compose the pieces you need:

<DescriptionList />Root grid container for term/detail pairs.
<DescriptionTerm />The label (dt) for a key-value pair.
<DescriptionDetails />The value (dd) for a key-value pair.
<DescriptionRow />Horizontal row layout for inline pairs.
<DescriptionRowGroup />Vertical group of stacked rows.
<DescriptionRowSeparator />Vertical separator between row groups.