Tree View

Nested items that open and close: files, categories or permissions.

$ pnpm dlx shadcn@latest add https://dashral.com/r/tree-view.json

app
- layout.tsx
- page.tsx
- settings
components3
package.json
README.md

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/tree-view.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/tree-view

Usage

example.tsx

1import { TreeView } from "@/components/dashral/tree-view"
2
3<TreeView
4  defaultExpanded="all"
5  items={[
6    {
7      id: "src",
8      label: "src",
9      children: [
10        { id: "app", label: "app.tsx" },
11        { id: "utils", label: "utils.ts" },
12      ],
13    },
14    { id: "readme", label: "README.md" },
15  ]}
16/>

Examples

Checkable

checkable ticks leaves; a branch shows ticked or half-ticked from its items, and ticks them all at once.

Orders
- View orders
- Edit orders
- Issue refunds
Customers
- View customers
- Export customers
Settings
- Manage team
- Billing

3 permissions granted

Filter

filter keeps the matches and opens the branches that lead to them, with the match marked.

Electronics128
Home76
Books213

API reference

TreeView

Also takes every prop of <ul>(opens in a new tab).

Prop	Type	Default
`items`	`{ id, label, textValue?, icon?, openIcon?, suffix?, children?, disabled? }[]` The items; children nest. Every id is unique in the tree. Required.	—
`expanded / defaultExpanded`	`string[] (default also "all")` The open branches, controlled or initial.	`[]`
`onExpandedChange`	`(expanded: string[]) => void` Called when a branch opens or closes.	—
`value / defaultValue`	`string \| null` The selected item, controlled or initial.	`null`
`onValueChange`	`(value: string) => void` Called with the new value.	—
`checkable`	`boolean` A checkbox on every row instead of selection.	`false`
`checked / defaultChecked`	`string[]` The ticked leaves (items without children), controlled or initial.	`[]`
`onCheckedChange`	`(checked: string[]) => void` Called with the ticked leaves.	—
`filter`	`string` Shows the items whose text holds it, opens the branches leading to them and marks the match.	—
`empty`	`ReactNode` Shown when the filter matches nothing.	`"No matches"`
`lines`	`boolean` Guide lines down each open branch.	`true`
`classNames`	`{ item, row, icon, label, suffix, group, empty }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Keyboard

Keys	Action
`↓`or`↑`	Move to the next or previous row
`→`	Open a branch, or move to its first item
`←`	Close a branch, or move to its parent
`Home`or`End`	Move to the first or last row
`Enter`or`Space`	Select the item, or tick it when checkable
`*`	Open every branch beside this one
`A–Z`	Jump to the next row starting with that letter

Accessibility

Follows the WAI-ARIA tree pattern: a tree of treeitems with aria-level, aria-setsize, aria-posinset and aria-expanded, and one row in the tab order.
Each row is named by its label only, not by the items inside it. Checkable rows have aria-checked, with "mixed" for a half-ticked branch.
Closed branches are inert, so nothing in them can be reached.

Motion

Branches slide open and closed by their content's height and fade (--duration-standard); the chevron turns on the spring. Instant with reduced motion.