DataList

Name: Rad UI
Author: Rad UI Team

A composable key-value list for displaying structured data like user profiles, metadata, or settings.

Name

Jane Doe

Role

Senior Engineer

Location

San Francisco, CA

React
"use client"

import DataList from "@radui/ui/DataList"

const DataListExample = () => {
    return (
        <DataList.Root>
            <DataList.Item>
                <DataList.Label>Name</DataList.Label>
                <DataList.Value>Jane Doe</DataList.Value>
            </DataList.Item>
            <DataList.Item>
                <DataList.Label>Role</DataList.Label>
                <DataList.Value>Senior Engineer</DataList.Value>
            </DataList.Item>
            <DataList.Item>
                <DataList.Label>Location</DataList.Label>
                <DataList.Value>San Francisco, CA</DataList.Value>
            </DataList.Item>
        </DataList.Root>
    )
}

export default DataListExample

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import DataList from "@radui/ui/DataList"

export default () => {
    return (
        <DataList.Root>
            <DataList.Item>
                <DataList.Label />
                <DataList.Value />
            </DataList.Item>
        </DataList.Root>
    )
}

Root

The root DataList container.

Prop	Type	Default
orientation	enum	horizontal
className	string	""