Basic

A description list is typically used to display pairs of terms and details, like in invoices or product specifications, enhancing clarity and organization of information.

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/description-list

Anatomy

import { DescriptionDetails, DescriptionList, DescriptionTerm } from "@/components/ui/description-list"

<DescriptionList>
  <DescriptionTerm>Invoice Number</DescriptionTerm>
  <DescriptionDetails>INV-12345</DescriptionDetails>
  <DescriptionTerm>Invoice Date</DescriptionTerm>
  <DescriptionDetails>September 21, 2024</DescriptionDetails>
</DescriptionList>

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

With heading

This example shows with heading.

With card

Sometimes, you may want to use a card to display the description list. This example shows how to do it.