## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @dotui/tree ``` ```bash pnpm dlx shadcn@latest add @dotui/tree ``` ```bash yarn dlx shadcn@latest add @dotui/tree ``` ```bash bun x shadcn@latest add @dotui/tree ``` ## Usage [#usage] Use a tree to display nested, hierarchical data such as a file system or category navigation. Each row is a `TreeItem` whose `TreeItemContent` holds the label; nested `TreeItem`s become its children. ```tsx import { Tree, TreeItem, TreeItemContent } from '@/components/ui/tree' ``` ```tsx Documents Weekly report ``` When rendering data dynamically, pass `items` to the `Tree` and a `Collection` to each `TreeItem` for its children. ```tsx import { Collection } from 'react-aria-components' ``` ```tsx {function renderItem(item) { return ( {item.name} {item.children && ( {renderItem} )} ) }} ``` ## Examples [#examples] ## API Reference [#api-reference] ### Tree [#tree] ### TreeItem [#treeitem] ### TreeItemContent [#treeitemcontent]