DataList

Displays a list of terms and their descriptions.

Usage

Display key-value pairs, such as user information, product specifications, or metadata.

import { DataList } from "@elemnts-ui/react"

export function Demo() {
	return (
		<DataList.Root>
			<DataList.Item>
				<DataList.ItemLabel>Name</DataList.ItemLabel>
				<DataList.ItemValue>Elemnts UI</DataList.ItemValue>
			</DataList.Item>
			<DataList.Item>
				<DataList.ItemLabel>License</DataList.ItemLabel>
				<DataList.ItemValue>MIT</DataList.ItemValue>
			</DataList.Item>
		</DataList.Root>
	)
}

Orientation

Control the layout of the data list with the orientation prop. Supported values are vertical (default) and horizontal.

API Reference

DataList

The root component for the data list.

Prop	Type	Default
asChild	`boolean`	`false`
orientation	`'vertical' \| 'horizontal'`	`'vertical'`

DataListItem

The item component for the data list.

Prop	Type	Default
asChild	`boolean`	`false`

DataListItemLabel

The label component for the data list item.

Prop	Type	Default
asChild	`boolean`	`false`

DataListItemValue

The value component for the data list item.

Prop	Type	Default
asChild	`boolean`	`false`