Tree view
A file and folder tree with animated expand, the full WAI-ARIA tree keyboard, single or checkbox selection with mixed parents, icons by type, guide lines, lazy loading and inline rename.
Preview
Explorer
F2 renames- app
- layout.tsx2.1 KB
- page.tsx4.8 KB
- settings
- page.tsx3.2 KB
- billing.tsx6.0 KB
- public
- docs
- package.json1.1 KB
- tsconfig.json0.6 KB
Export
3 files- Brand kit
- mark-light.svg12 KB
- mark-dark.svg12 KB
- palette.json2 KB
- Screens
- home.png840 KB
- pricing.png612 KB
- legacy.png1.2 MB
- handoff-notes.md6 KB
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | TreeNode[] | — | { id, name, children?, lazy?, icon?, meta?, disabled? }. Icons default by file extension. |
| label | string | — | Accessible name of the tree. |
| expanded / defaultExpanded | string[] | [] | Open folder ids. |
| onExpandedChange | (ids: string[]) => void | — | Called when folders open or close. |
| selectionMode | "single" | "multiple" | "single" | Multiple shows checkboxes with mixed parents. |
| selected / defaultSelected | string[] | [] | Selected ids (leaf ids in multiple mode). |
| onSelectedChange | (ids: string[]) => void | — | Called when the selection changes. |
| loadChildren | (node) => Promise<TreeNode[]> | — | Loads a lazy folder's children on first open; shows a spinner meanwhile. |
| onRename | (id, name) => void | — | Enables inline rename with F2 or double-click. |
| onActivate | (node) => void | — | Enter or double-click on a leaf. |
| guides | boolean | true | Draw indent guide lines. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.