{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "description-list", "title": "Description List", "description": "Key–value pairs such as applicant, property and fee, as valid dl markup in stacked, side-by-side or grid layouts.", "files": [ { "path": "registry/rapid/ui/description-list/description-list.tsx", "content": "import type * as React from 'react'\nimport { cn } from '@/lib/utils'\n\n// The layout is driven by data attributes on the
, so the parts need no React context and work in server components.\n// The grid of pairs responds to the list's own width, not the viewport, so it also behaves inside cards and side panels:\n// it shows up to `columns` columns, and drops to fewer when a column would be narrower than --description-list-column-min.\nfunction DescriptionList({\n\tclassName,\n\torientation = 'vertical',\n\tdivided = false,\n\tcolumns = 1,\n\t...props\n}: React.ComponentProps<'dl'> & {\n\t/** `vertical` stacks the term above the value; `horizontal` puts terms in a column beside the values */\n\torientation?: 'vertical' | 'horizontal'\n\t/** Draw a rule between the pairs */\n\tdivided?: boolean\n\t/** The largest number of pairs per row; fewer are shown when the list is too narrow */\n\tcolumns?: 1 | 2 | 3 | 4\n}) {\n\treturn (\n\t\t\n\t)\n}\n\nfunction DescriptionListItem({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t\n\t)\n}\n\nfunction DescriptionListTerm({ className, ...props }: React.ComponentProps<'dt'>) {\n\treturn (\n\t\t\n\t)\n}\n\nfunction DescriptionListDetails({ className, ...props }: React.ComponentProps<'dd'>) {\n\treturn (\n\t\t\n\t)\n}\n\nexport { DescriptionList, DescriptionListItem, DescriptionListTerm, DescriptionListDetails }\n", "type": "registry:ui", "target": "components/ui/description-list.tsx" } ], "meta": { "new": true }, "type": "registry:ui" }