Tree

File-explorer tree with indent guides, icons, meta, disabled nodes and full WAI-ARIA tree keyboard support.

3 files · 174 locdeps: clsx, tailwind-merge

Selected: fluid · ↑ ↓ ← → Home End

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/tree.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs tree

import { Tree } from "@/components/opus/ui/tree";

<Tree data={nodes} selected={id} onSelectedChange={setId} defaultExpanded={["src"]} />

Prop	Type	Default	Description
data	TreeNode[]	—	{ id, label, icon?, meta?, children?, disabled? }
selected / onSelectedChange	string	—	Selection.
expanded / defaultExpanded / onExpandedChange	string[]	—	Open folders.
guides	boolean	true	Indent lines.