Docs
Data List

Data List

A structured list for displaying key-value data pairs with consistent alignment and spacing.

DocsAPI Reference
Status
Active
Created
December 12, 2023
Updated
January 5, 2024
Type
Personal

Installation

pnpm dlx radixcn@latest add data-list

Usage

import { DataList } from "@/components/ui/data-list"
<DataList.Root>
  <DataList.Item>
    <DataList.Label>Status</DataList.Label>
    <DataList.Value>Active</DataList.Value>
  </DataList.Item>
</DataList.Root>

Examples

Alignment

The DataList.Item component accepts an align prop to control the vertical alignment of the label and value. This is particularly useful when dealing with multi-line content or components of varying heights.

Status
Active
Description
A longer description that might span multiple lines. This shows how baseline alignment keeps the text properly aligned.
Tags
DesignDevelopmentProduct

Props

Root

A container for the data list items.

PropTypeDescriptionDefault
classNamestringOptional class name for the root element.

Item

A container for a label-value pair.

PropTypeDescriptionDefault
align"start" | "center" | "end" | "baseline" | "stretch"Controls the vertical alignment of the label and value."start"
classNamestringOptional class name for the item element.

Label

The label component for the data item.

PropTypeDescriptionDefault
minWidthstringSets the minimum width of the label.
classNamestringOptional class name for the label element.

Value

The value component for the data item.

PropTypeDescriptionDefault
classNamestringOptional class name for the value element.
Context MenuDate Picker