Description List

A semantically correct description list built on the HTML <dl> element. Renders a list of label/value pairs, commonly used in detail views to display metadata about a resource.

Compose <DescriptionList.Root> with <DescriptionList.Item>, <DescriptionList.Label>, and <DescriptionList.Value> as direct children.

Key: my-api-key
ID: aigk_2fKm9x8Hn3QpYT7zKlR0vW5
Description: Production API key for the billing service
Created: 2 days ago by admin@example.com
Last Used: Never
Metadata: 17 Bytes

1import { DescriptionList } from "@ngrok/mantle/description-list";2 3<DescriptionList.Root>4	<DescriptionList.Item>5		<DescriptionList.Label>Key</DescriptionList.Label>6		<DescriptionList.Value className="font-bold">my-api-key</DescriptionList.Value>7	</DescriptionList.Item>8	<DescriptionList.Item>9		<DescriptionList.Label>ID</DescriptionList.Label>10		<DescriptionList.Value>aigk_2fKm9x8Hn3QpYT7zKlR0vW5</DescriptionList.Value>11	</DescriptionList.Item>12	<DescriptionList.Item>13		<DescriptionList.Label>Description</DescriptionList.Label>14		<DescriptionList.Value>Production API key for the billing service</DescriptionList.Value>15	</DescriptionList.Item>16	<DescriptionList.Item>17		<DescriptionList.Label>Created</DescriptionList.Label>18		<DescriptionList.Value>2 days ago by admin@example.com</DescriptionList.Value>19	</DescriptionList.Item>20	<DescriptionList.Item>21		<DescriptionList.Label>Last Used</DescriptionList.Label>22		<DescriptionList.Value>23			<span className="italic text-muted">Never</span>24		</DescriptionList.Value>25	</DescriptionList.Item>26	<DescriptionList.Item>27		<DescriptionList.Label>Metadata</DescriptionList.Label>28		<DescriptionList.Value>17 Bytes</DescriptionList.Value>29	</DescriptionList.Item>30</DescriptionList.Root>;

API Reference

DescriptionList.Root

The root container for a description list. Renders a <dl> element.

All props from dl, plus:

Prop	Type	Default	Description
`children?`	`ReactNode`		Compose `DescriptionList.Item` components as direct children.
`className?`	`string`		Additional CSS class names to apply to the root element.
`asChild?`	`boolean`	`false`	Use the `asChild` prop to compose the `DescriptionList.Root` styling onto alternative element types or your own React components.

DescriptionList.Item

A wrapper that groups a DescriptionList.Label and DescriptionList.Value pair. Renders a <div> with a default subgrid layout that inherits column tracks from the root.

All props from div, plus:

Prop	Type	Default	Description
`children?`	`ReactNode`		A `DescriptionList.Label` and `DescriptionList.Value` pair.
`className?`	`string`		Additional CSS class names to apply to the item wrapper.
`asChild?`	`boolean`	`false`	Use the `asChild` prop to compose the `DescriptionList.Item` styling onto alternative element types or your own React components.

DescriptionList.Label

The label for a description list item. Renders a <dt> element.

All props from dt, plus:

Prop	Type	Default	Description
`children?`	`ReactNode`		The label text for this description list item.
`className?`	`string`		Additional CSS class names to apply to the label element.
`asChild?`	`boolean`	`false`	Use the `asChild` prop to compose the `DescriptionList.Label` styling onto alternative element types or your own React components.

DescriptionList.Value

The value for a description list item. Renders a <dd> element. Compose any content inside — the component imposes no layout on its children.

All props from dd, plus:

Prop	Type	Default	Description
`children?`	`ReactNode`		The value content for this description list item. Can be any React node — text, formatted values, interactive elements, etc.
`className?`	`string`		Additional CSS class names to apply to the value element.
`asChild?`	`boolean`	`false`	Use the `asChild` prop to compose the `DescriptionList.Value` styling onto alternative element types or your own React components.