Tree view
Navigates a hierarchy with expansion, single selection, and roving focus.
Preview
- Studies
- Drive
- Orbit
- Archive
In action
- Studies
- Drive
- Orbit
- Archive
When to use
Use it for
- File trees, nested assets, and hierarchical selection.
Not for
- A flat list of destination links; use Sidebar.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { TreeView } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/tree-view.
2. Vendor the source
npx @noorddev/vlak-cli add tree-view
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/tree-view.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { TreeView } from "@noorddev/vlak-react";
<TreeView label="Studies" defaultExpanded={["studies"]} defaultValue="drive" nodes={[{ id: "studies", label: "Studies", children: [{ id: "drive", label: "Drive" }, { id: "orbit", label: "Orbit" }] }, { id: "archive", label: "Archive" }]} />Props
TreeView
Single selection and APG-style roving focus through a hierarchical collection.
| Prop | Type | Default | Description |
|---|---|---|---|
nodesrequired | TreeNode[] | ||
labelrequired | string | ||
value | string | ||
defaultValue | string | ||
onValueChange | (value: string) => void | ||
expanded | string[] | ||
defaultExpanded | string[] | [] | |
onExpandedChange | (ids: string[]) => void |
Also accepts Omit<HTMLAttributes<HTMLUListElement>, "defaultValue" | "onSelect">.
Keyboard
| Keys | Does |
|---|---|
| Arrows, Home, End, Enter, Space, letters | Arrows navigate and expand/collapse; Enter or Space selects; typing finds a visible label. |
Accessibility
- One tree item is in the Tab sequence. Level, position, selected, expanded, and disabled state are explicit.
Markup
<ul class="rs-tree-view" role="tree" aria-label="Studies"><li role="none"><div class="rs-tree-view-item rs-tree-view-selected" role="treeitem" aria-selected="true" aria-level="1" tabindex="0">Drive</div></li></ul>
Classes
.rs-tree-view.rs-tree-view-group.rs-tree-view-item.rs-tree-view-selected.rs-tree-view-disabled.rs-tree-view-spacer.rs-tree-view-disclosure.rs-tree-view-label