Component

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

View component changelog
preview
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

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>
    )
}

The root DataList container. Wraps all items and controls the size of the list.

PropTypeDefaultDescription
size
string
""

Controls font size and row gap. One of: small, medium, large.

customRootClass
string
""

Overrides the Theme classNamespace for this component only.

className
string
""

Additional CSS classes applied to the root element.

A single key-value row. Renders as a CSS subgrid row spanning both label and value columns.

PropTypeDefaultDescription
className
string
""

Additional CSS classes applied to the item element.

The label part of a key-value pair. Renders as a <dt> element. Supports an independent accent color.

PropTypeDefaultDescription
color
string
""

Accent color applied to this label only, independent of the root. Sets data-rad-ui-accent-color on the element.

className
string
""

Additional CSS classes applied to the label element.

The value part of a key-value pair. Renders as a <dd> element.

PropTypeDefaultDescription
className
string
""

Additional CSS classes applied to the value element.

Examples

preview

size: small

Name
Jane Doe
Role
Senior Engineer
Location
San Francisco, CA

size: medium

Name
Jane Doe
Role
Senior Engineer
Location
San Francisco, CA

size: large

Name
Jane Doe
Role
Senior Engineer
Location
San Francisco, CA
React
"use client"

import DataList from "@radui/ui/DataList"

const DataListSizes = () => {
    const sizes = ['small', 'medium', 'large'] as const;
    return (
        <div className="flex flex-col gap-8">
            {sizes.map((size) => (
                <div key={size}>
                    <p className="text-gray-500 text-xs mb-2">size: {size}</p>
                    <DataList.Root size={size}>
                        <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>
                </div>
            ))}
        </div>
    )
}

export default DataListSizes
preview

label color: blue

Name
Jane Doe
Role
Senior Engineer
Location
San Francisco, CA

label color: green

Name
Jane Doe
Role
Senior Engineer
Location
San Francisco, CA

label color: red

Name
Jane Doe
Role
Senior Engineer
Location
San Francisco, CA

label color: purple

Name
Jane Doe
Role
Senior Engineer
Location
San Francisco, CA
React
"use client"

import DataList from "@radui/ui/DataList"

const DataListColor = () => {
    const colors = ['blue', 'green', 'red', 'purple'] as const;
    return (
        <div className="flex flex-col gap-8">
            {colors.map((color) => (
                <div key={color}>
                    <p className="text-gray-500 text-xs mb-2">label color: {color}</p>
                    <DataList.Root>
                        <DataList.Item>
                            <DataList.Label color={color}>Name</DataList.Label>
                            <DataList.Value>Jane Doe</DataList.Value>
                        </DataList.Item>
                        <DataList.Item>
                            <DataList.Label color={color}>Role</DataList.Label>
                            <DataList.Value>Senior Engineer</DataList.Value>
                        </DataList.Item>
                        <DataList.Item>
                            <DataList.Label color={color}>Location</DataList.Label>
                            <DataList.Value>San Francisco, CA</DataList.Value>
                        </DataList.Item>
                    </DataList.Root>
                </div>
            ))}
        </div>
    )
}

export default DataListColor
Edit this page on GitHub →