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

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

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

PropTypeDefault

label*

string | ReactNode--

defaultOpen

boolean

false

className

string""