{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "description-list",
  "type": "registry:ui",
  "title": "Description list",
  "description": "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.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/description-list.tsx",
      "type": "registry:ui",
      "target": "components/ui/description-list.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n/** Label and value pairs in a two-column grid, for record details like a customer or an invoice. */\ntype DescriptionItem = { label: React.ReactNode; value: React.ReactNode }\n\nconst SAMPLE_ITEMS: DescriptionItem[] = [\n  { label: \"Customer\", value: \"Northwind Labs\" },\n  { label: \"Billing contact\", value: \"Maya Chen\" },\n  { label: \"Plan\", value: \"Growth, annual\" },\n  { label: \"Next invoice\", value: \"Nov 1, 2026\" },\n  { label: \"Payment method\", value: <span className=\"font-mono text-xs\">Visa •••• 4242</span> },\n  { label: \"Region\", value: \"eu-west-1\" },\n]\n\ntype DescriptionListProps = {\n  /** Pairs to show, in order. Defaults to a Lumen customer record. */\n  items?: DescriptionItem[]\n  className?: string\n}\n\nfunction DescriptionList({ items = SAMPLE_ITEMS, className }: DescriptionListProps) {\n  return (\n    <dl data-slot=\"description-list\" className={cn(\"grid w-full max-w-xl gap-3 sm:grid-cols-2\", className)}>\n      {items.map((item, i) => (\n        <div key={i} className=\"border-b border-border pb-3\">\n          <dt className=\"text-xs font-medium tracking-[0.01em] text-fg-muted\">{item.label}</dt>\n          <dd className=\"mt-1 text-sm text-fg\">{item.value}</dd>\n        </div>\n      ))}\n    </dl>\n  )\n}\nexport { DescriptionList }\nexport type { DescriptionListProps, DescriptionItem }\n"
    }
  ]
}