Description list

Label and value pairs on hairline rows.

npx shadcn@latest add https://ui.goodtabs.co/r/description-list.json

With the @goodtabs namespace in components.json: npx shadcn@latest add @goodtabs/description-list

Plan: Free
Seats: 3 of 5
Region: Frankfurt

Readable at 250px.

Account details

Workspace: Goodtabs studio
Owner: maya@example.com
Domain: studio.example.com
Status: Verified
Created: 14 Oct 2026

Values can be links, times or other components.

Usage

import { DescriptionList, DescriptionItem } from "@/components/ui/description-list"

<DescriptionList>
  <DescriptionItem label="Plan">Free</DescriptionItem>
</DescriptionList>

Props

Prop	Type	Default	Description
label	string		DescriptionItem: what the value is.
children	ReactNode		DescriptionItem: the value.

Source

description-list/description-list.tsx

import * as React from "react";
import { cn } from "@/lib/utils";

type DescriptionListProps = React.ComponentProps<"dl">;

/** Label and value pairs on hairline rows. Compose with DescriptionItem. */
export function DescriptionList({ className, ...props }: DescriptionListProps) {
  return <dl className={cn("m-0 divide-y text-sm", className)} {...props} />;
}

type DescriptionItemProps = Omit<React.ComponentProps<"div">, "children"> & {
  /** What the value is, for example "Plan". */
  label: string;
  /** The value. */
  children: React.ReactNode;
};

export function DescriptionItem({ label, children, className, ...props }: DescriptionItemProps) {
  return (
    <div className={cn("grid grid-cols-[minmax(0,2fr)_minmax(0,3fr)] gap-4 py-2.5", className)} {...props}>
      <dt className="min-w-0 break-words text-muted-foreground">{label}</dt>
      <dd className="m-0 min-w-0 break-words text-foreground">{children}</dd>
    </div>
  );
}

For AI agents

Hand your agent this page, the markdown at /components/description-list/prompt.md, or the Copy AI prompt button above.

When to use

Details panels, settings summaries, record headers
Read-only facts about one thing

When not to use

Editable pairs: use key-value-editor
Many records side by side: use a table

Agent notes

Renders a real dl, dt and dd
Rows are divided by hairlines; add border and padding on the list for a boxed look
Long values wrap and never overflow