Description List

A description list is typically used to display pairs of terms and details, like in invoices or product specifications, enhancing clarity and organization of information.

If you are using Tailwind v4, please refer to the 2.x documentation. This documentation assumes you are using Tailwind v3.

Basic

A description list is typically used to display pairs of terms and details, like in invoices or product specifications, enhancing clarity and organization of information.

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

If you hit any issues, make sure you check out the installation guide here.

Anatomy

Import the components and use them as shown below, adapting the structure to fit each component.

Manual Installation

With Heading

This example shows with heading.

Product Details

Product Name
Wireless Headphones
Battery Life
20 hours
Weight
250 grams
Color
Black
Warranty
2 years

With Card

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

Product Details

The product details card is a great way to display information about a product.
Product Name
Wireless Headphones
Battery Life
20 hours
Weight
250 grams
Color
Black
Warranty
2 years
Edit