Tree

A hierarchical list for files and nested navigation, with animated expansion, a gliding selection and full keyboard support.

Data Display

app
- layout.tsx
- page.tsx
- dashboard
components
- ui
  - button.tsx
  - dialog.tsx
  - tree.tsx
public
package.json
README.md

Playground

Tweak the props, the preview and the code follow.

src
- components
  - button.tsx
  - logo.svg
- app.tsx
- styles.css
docs
package.json

Props

guides

start expanded

border

<Tree
  data={data}
  defaultExpanded={["src", "components"]}
  onSelect={(node) => console.log(node.id)}
/>

Installation

npx @plumsydev/plum-ui add tree

Usage

import { Tree, type TreeNode } from "@/components/ui/tree"

const data: TreeNode[] = [
  { id: "src", name: "src", children: [{ id: "src/main.tsx", name: "main.tsx" }] },
]

<Tree data={data} defaultExpanded={["src"]} />

Examples

Controlled

Own expanded and selected to build toolbars and breadcrumbs around it.

Explorer

src
- lib
- styles
- main.tsx
scripts
tsconfig.json

src/main.tsx

Custom icons

Pass icon per node and turn off guides for a settings menu.

Account
- Profile
- Appearance
- Notifications
Workspace
- Members
- Billing
- Security

Try ↑ ↓ ← → and Enter.

API Reference

Tree

Prop	Type	Default
`data*` `{ id, name, children?, icon?, disabled? }`.	`TreeNode[]`	`—`
`expanded / defaultExpanded` Ids of open folders.	`string[]`	`—`
`onExpandedChange` Called when a folder opens or closes.	`(ids: string[]) => void`	`—`
`selected / defaultSelected` Id of the selected node.	`string \| null`	`—`
`onSelect` Called on click, Enter or Space.	`(node: TreeNode) => void`	`—`
`guides` Vertical lines linking nested levels.	`boolean`	`true`

Notes

Follows the WAI-ARIA tree pattern: ↑ ↓ move, → opens or enters, ← closes or goes to the parent, Home / End jump.
File icons are picked from the extension when no icon is given.

PreviousTooltip NextTypewriter