Tree View
FREEFile-style tree with expandable folders, selection, guide lines and full keyboard support.
Installation
Terminal
npx @bloxa/cli add tree-view
# or: npx shadcn@latest add @bloxa/tree-viewExamples
Project files
Keyboard: arrows, Home/End, Enter, * expands siblings.
- app
- layout.tsx2 kB
- page.tsx6 kB
- docs
- page.tsx3 kB
- components
- ui
- button.tsx
- chart.tsx
- dialog.tsx
- site-header.tsx
- package.json1 kB
- .env
API reference
Every component also accepts the props of the element it renders.
TreeView
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { id, label, icon?, meta?, children?, disabled? }[] | — | Nodes. |
| selected / onSelect | string / (node) => void | — | Selected node. |
| expanded / defaultExpanded / onExpandedChange | string[] | — | Open branches. |
| guides | boolean | true | Guide lines. |
| folderIcon / fileIcon | (open) => ReactNode / ReactNode | — | Default icons. |