React Tree View
A repository file browser: nested folders and files with expand/collapse, indent guides, selection, and optional git-status flags (M/A/D/U) with per-file metadata. Folders sort before files; expansion and selection are managed internally.
- docs
- src
- rtl
- aes_core.sv+42 −8M
- aes_csr.sv+120A
- aes_sbox.sv
- tb
- top.sv
- LICENSE
- MakefileD
- README.md
Installation
npx shadcn@latest add "https://kelvinui.com/registry/tree-view.json"
Props
| Prop | Type | Description |
|---|---|---|
| data | TreeNode[] | The tree; each node is a file or folder |
| defaultExpanded | string[] | Folder paths to expand initially (e.g. "src/rtl") |
| defaultSelected | string | Initially selected file path |
| onSelect | (path: string) => void | Fires when a file is selected |
Each TreeNode is { name, type: "file" | "folder", children?, status?, meta? }. status is one of modified | added | deleted | untracked and renders a colored flag; meta is right-aligned mono text such as "+12 −3".
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.