Tree

Name: Rad UI
Author: Rad UI Team

A hierarchical data display component. Nest Tree.Item elements to represent folder structures, file trees, or any recursive data.

React
"use client"

import Tree from "@radui/ui/Tree"

const items = [
    {
        label: 'src',
        expanded: true,
        items: [
            {
                label: 'components',
                expanded: false,
                items: [
                    { label: 'Button.tsx', expanded: false },
                    { label: 'Input.tsx', expanded: false }
                ]
            },
            {
                label: 'utils',
                expanded: false,
                items: [
                    { label: 'helpers.ts', expanded: false }
                ]
            },
            { label: 'index.ts', expanded: false }
        ]
    },
    { label: 'package.json', expanded: false },
    { label: 'tsconfig.json', expanded: false }
]

const TreeExample = () => {
    return (
        <Tree.Root>
            {items.map((item) => (
                <Tree.Item key={item.label} item={item}>
                    {item.label}
                </Tree.Item>
            ))}
        </Tree.Root>
    )
}

export default TreeExample

API Documentation

Anatomy

Import all parts of the component and piece them together

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

const item = { label: 'Parent', expanded: true, items: [{ label: 'Child', expanded: false }] }

export default () => {
    return (
        <Tree.Root>
            <Tree.Item item={item}>
                {item.label}
            </Tree.Item>
        </Tree.Root>
    )
}

Item

A single tree node. Can contain nested Tree.Item elements.

Prop	Type	Default
label*	string \| ReactNode	--
defaultOpen	boolean	false
className	string	""