Description List

Install

Install manually View source on GitHub

Anatomy

DescriptionList
DescriptionListItem
DescriptionListTerm
DescriptionListDetails
DescriptionListAction

Accessibility3 checks

Renders native dl, dt, and dd elements so screen readers announce term and value pairs.
Inline items wrap the value below its label on narrow widths without media queries.
Actions are native buttons inside the value; give icon-only actions an aria-label.

Data display

Customer: Northwind Logistics
Plan: Business · 42 seats, billed yearly
Account ID: acct_8KQ2M7
Renewal: March 14, 2027

Code example

usage.tsx

"use client";import { Check, Copy } from "lucide-react";import { useState } from "react";import {  DescriptionList,  DescriptionListAction,  DescriptionListDetails,  DescriptionListItem,  DescriptionListTerm,  type DescriptionListVariant,} from "@/components/ui/uai/description-list";export function DescriptionListPreview({  variant = "inline",}: {  variant?: DescriptionListVariant;}) {  const [copied, setCopied] = useState(false);  return (    <DescriptionList variant={variant}>      <DescriptionListItem>        <DescriptionListTerm>Customer</DescriptionListTerm>        <DescriptionListDetails>Northwind Logistics</DescriptionListDetails>      </DescriptionListItem>      <DescriptionListItem>        <DescriptionListTerm>Plan</DescriptionListTerm>        <DescriptionListDetails>Business · 42 seats, billed yearly</DescriptionListDetails>      </DescriptionListItem>      <DescriptionListItem>        <DescriptionListTerm>Account ID</DescriptionListTerm>        <DescriptionListDetails>          <code>acct_8KQ2M7</code>          <DescriptionListAction            aria-label={copied ? "Account ID copied" : "Copy account ID"}            onClick={() => setCopied(true)}          >            {copied ? (              <Check size={14} aria-hidden="true" />            ) : (              <Copy size={14} aria-hidden="true" />            )}          </DescriptionListAction>        </DescriptionListDetails>      </DescriptionListItem>      <DescriptionListItem>        <DescriptionListTerm>Renewal</DescriptionListTerm>        <DescriptionListDetails>          March 14, 2027          <DescriptionListAction>Change</DescriptionListAction>        </DescriptionListDetails>      </DescriptionListItem>    </DescriptionList>  );}

Manual installation

description-list.tsx

Loading component source…