Data display · Application UI
File tree
Collapsible file/folder tree with selection, sorting, and expand-all, plus a panel variant (chevron disclosure, guide lines, count badges) and multi-select with cascading checkboxes, rebuilt on Base UI. Base from MagicUI; panel/multi-select inspired by Untitled UI.
@byronwade/foundation@byronwade/utils@byronwade/button@byronwade/badge@byronwade/checkbox@byronwade/scroll-area@byronwade/collapsible@phosphor-icons/react
Feature showcase
Installation
Features
3 examples
Default, Panel, Multi Select.
API
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
| @byronwade/button | registry | Installed through the byronwade/ui registry. |
| @byronwade/badge | registry | Installed through the byronwade/ui registry. |
| @byronwade/checkbox | registry | Installed through the byronwade/ui registry. |
| @byronwade/scroll-area | registry | Installed through the byronwade/ui registry. |
| @byronwade/collapsible | registry | Installed through the byronwade/ui registry. |
| @phosphor-icons/react | npm | Installed from npm. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/file-tree.tsx |
| Default example | content/examples/file-tree/default.tsx |
| Panel example | content/examples/file-tree/panel.tsx |
| Multi Select example | content/examples/file-tree/multi-select.tsx |