MiniDev UI

Description List

Semantic dl, dt and dd list of label and value pairs in a responsive two column grid with dividers. Good for record details and summaries in Tailwind apps.

src/registry/ui/description-list.tsx/r/description-list.json

Installation#

bash
npx shadcn@latest add @minidev/description-list

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/description-list.json

Usage#

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

export function Example() {
  return (
    <DescriptionList className="max-w-lg" items={[
      { label: "Workspace", value: "MiniDev" },
      { label: "Plan", value: "Agency" },
      { label: "Region", value: "us-east-1" },
      { label: "Status", value: <span className="inline-flex items-center gap-2"><StatusDot tone="success" /> Healthy</span> },
    ]} />
  )
}

API reference#

DescriptionList props
PropTypeDefault
itemsDescriptionItem[]SAMPLE_ITEMS
classNamestring-

Examples#

FeedsActivity & notifications

Related layout components#

AccordionAccessible React accordion on Base UI, with bordered items, a rotating chevron and animated panels. Keyboard navigable, with one or many items open at once.App ShellTailwind app shell layout with a fixed width sidebar slot, a topbar slot and a scrolling main area. The sidebar hides below the md breakpoint for mobile.Aspect RatioShadcn compatible aspect ratio wrapper that locks media to a ratio such as 16:9 or 1:1 using CSS aspect-ratio, with overflow clipped for images and video.CardShadcn compatible card with header, title, description, action, content and footer slots, a compact size and edge to edge images. Built for Tailwind v4.CenterLayout helper that centers content horizontally and vertically in a narrow, text-centered column. Handy for empty states, auth screens and simple heroes.ClusterFlex layout primitive that wraps children in a row with vertical centering and a numeric gap on the 4px scale. Great for tags, buttons and meta rows.
All layout components