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.

npm install tailwind-merge

Examples

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.

Component API

DescriptionDetails

The DescriptionDetails component renders the value in a description list.

DescriptionList

The DescriptionList component displays terms and details in a structured list.

DescriptionTerm

The DescriptionTerm component renders the label in a description list.