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 the <DescriptionList> 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

import { DescriptionList } from "@ngrok/mantle/description-list";

<DescriptionList.Root>
	<DescriptionList.Item>
		<DescriptionList.Label>Key</DescriptionList.Label>
		<DescriptionList.Value className="font-bold">
			my-api-key
		</DescriptionList.Value>
	</DescriptionList.Item>
	<DescriptionList.Item>
		<DescriptionList.Label>ID</DescriptionList.Label>
		<DescriptionList.Value>
			aigk_2fKm9x8Hn3QpYT7zKlR0vW5
		</DescriptionList.Value>
	</DescriptionList.Item>
	<DescriptionList.Item>
		<DescriptionList.Label>Description</DescriptionList.Label>
		<DescriptionList.Value>Production API key for the billing service</DescriptionList.Value>
	</DescriptionList.Item>
	<DescriptionList.Item>
		<DescriptionList.Label>Created</DescriptionList.Label>
		<DescriptionList.Value>2 days ago by admin@example.com</DescriptionList.Value>
	</DescriptionList.Item>
	<DescriptionList.Item>
		<DescriptionList.Label>Last Used</DescriptionList.Label>
		<DescriptionList.Value>
			<span className="italic text-muted">Never</span>
		</DescriptionList.Value>
	</DescriptionList.Item>
	<DescriptionList.Item>
		<DescriptionList.Label>Metadata</DescriptionList.Label>
		<DescriptionList.Value>17 Bytes</DescriptionList.Value>
	</DescriptionList.Item>
</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 and functionality 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 and functionality 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 and functionality 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 and functionality onto alternative element types or your own React components.