Description List

Loading...

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 cn

Examples

With heading

This example shows with heading.

Loading...

With card

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

Loading...

Component API

DescriptionDetails

DescriptionDetails extends the native <dd> element.

classNamestring

DescriptionList

DescriptionList extends the native <dl> element.

classNamestring

DescriptionTerm

DescriptionTerm extends the native <dt> element.

classNamestring
Design