Ravox KitNavigation
Tree View
Tree view for files and folders, document sections or nested categories. Arrows open, close and move, a letter jumps to an item, and each row can have a detail and an action at the end. Follows the WAI-ARIA pattern.
src
components
botao.tsx2 kB
cartao.tsx4 kB
page.tsx6 kB
public
logo.png18 kB
README.md
Settings
Toggles
Examples
Only the top folders open
src
components
page.tsx6 kB
public
README.md
Installation
The command creates components/ui/tree-view.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add tree-viewProps
| Prop | Type | Default | Description |
|---|---|---|---|
| items | TreeNode[] | — | { id, label, icon?, detail?, action?, children?, disabled? }. With `children`, the item becomes a folder. |
| label | string | — | Name of the tree for screen readers. |
| value | string | null | — | Selected item (controlled). |
| defaultValue | string | null | — | Item selected at the start (uncontrolled). |
| onSelect | (id: string) => void | — | Called when an item is chosen (folders open and close). |
| defaultExpanded | string[] | todas | Folders that start open. |
| density | "default" | "compact" | "default" | Row height: 32px or 28px. |