Description List
A semantic structure used to display pairs of terms and their corresponding descriptions. Ideal for presenting structured data like metadata, definitions, or key-value content in a readable format.
Example
Features
- Displays structured term–description pairs.
- Semantically correct using HTML’s
<dl>,<dt>, and<dd>. - Ideal for metadata, glossaries, and technical specs.
- Supports flexible layouts (vertical or horizontal) with CSS or utility classes.
Installation
Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Copy and paste the following code into your project.
npx libravelui@latest add description-listAnatomy
import {
DescriptionList,
DescriptionTerm,
DescriptionDetails,
} from "@/components/ui/core/description-list";<DescriptionList>
<DescriptionTerm>Term 1</DescriptionTerm>
<DescriptionDetails>Details 1</DescriptionDetails>
<DescriptionTerm>Term 2</DescriptionTerm>
<DescriptionDetails>Details 2</DescriptionDetails>
</DescriptionList>Another Examples
With Card
Shows a list of descriptions inside a styled card for clear and structured presentation.
Card
A versatile container component designed to organize and present content in a structured card layout, typically composed of distinct header, body, and footer sections. It provides a clean and consistent way to group related information within a unified visual block.
Heading
A semantic heading component that renders the appropriate HTML heading level with consistent typography and styling.