Description List

Invoice Number: INV-12345
Invoice Date: September 21, 2024
Due Date: October 21, 2024
Customer Name: John Doe
Total Amount: $1,250.00
Status: Pending

Installation

Add the component with the CLI.

npm

pnpm

yarn

bun

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>