Description List

Key-value pair display using a definition list — responsive grid layout with term and details sub-components.

Preview

Basic description list

import { DescriptionList, DescriptionTerm, DescriptionDetails } from '@/registry/ui-kit/tailwind-description-list/react'

function Example() {
  return (
    <DescriptionList>
      <div className="sm:grid sm:grid-cols-3 sm:gap-4 py-3">
        <DescriptionTerm>Name</DescriptionTerm>
        <DescriptionDetails>Alice Johnson</DescriptionDetails>
      </div>
      <div className="sm:grid sm:grid-cols-3 sm:gap-4 py-3">
        <DescriptionTerm>Email</DescriptionTerm>
        <DescriptionDetails>alice@example.com</DescriptionDetails>
      </div>
    </DescriptionList>
  )
}

Component API

Prop	Default	Description
`DescriptionList`	`—`	Root <dl> wrapper with divide-y styling.
`DescriptionTerm`	`—`	The <dt> label — medium weight, muted color.
`DescriptionDetails`	`—`	The <dd> value — standard text color.

Source Code

"use client";

import { forwardRef } from "react";

/* ── DescriptionList ── */

const DescriptionList = forwardRef<HTMLDListElement, React.HTMLAttributes<HTMLDListElement>>(
  ({ className = "", children, ...props }, ref) => (
    <dl
      ref={ref}
      className={`divide-y divide-zinc-100 dark:divide-zinc-800 ${className}`}
      {...props}
    >
      {children}
    </dl>
  )
);
DescriptionList.displayName = "DescriptionList";

/* ── DescriptionTerm ── */

const DescriptionTerm = forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
  ({ className = "", children, ...props }, ref) => (
    <dt
      ref={ref}
      className={`text-sm font-medium text-zinc-500 dark:text-zinc-400 ${className}`}
      {...props}
    >
      {children}
    </dt>
  )
);
DescriptionTerm.displayName = "DescriptionTerm";

/* ── DescriptionDetails ── */

const DescriptionDetails = forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
  ({ className = "", children, ...props }, ref) => (
    <dd
      ref={ref}
      className={`text-sm text-zinc-900 dark:text-zinc-100 ${className}`}
      {...props}
    >
      {children}
    </dd>
  )
);
DescriptionDetails.displayName = "DescriptionDetails";

export { DescriptionList, DescriptionTerm, DescriptionDetails };
export default DescriptionList;