# Description list (goodtabs UI)

Label and value pairs on hairline rows.

## Install

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

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/description-list`

## Usage

```tsx
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. |

## 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

## Notes for agents

- 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

Docs: https://ui.goodtabs.co/components/description-list