ComponentsCore

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 motion

Add cn helper using clsx and twMerge for conditional class merging in Tailwind components.

lib/utils.ts

Copy and paste the following code into your project.

components/ui/core/description-list.tsx
npx @libravelui@latest add description-list

Anatomy

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.

Edit on GitHub

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.