Tree View

src

public

package.json

tsconfig.json

Installation

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

npx shadcn@latest add https://prototyper-ui.com/r/tree-view.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/tree-view.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/tree-view.json

This will add the following files to your project:

components/ui/tree-view.tsx

Usage

import {
  TreeView,
  TreeViewItem,
  TreeViewGroup,
  TreeViewLeaf,
} from "@/components/ui/tree-view";

<TreeView>
  <TreeViewItem itemKey="src" label="src">
    <TreeViewGroup>
      <TreeViewLeaf>index.tsx</TreeViewLeaf>
      <TreeViewLeaf>app.tsx</TreeViewLeaf>
    </TreeViewGroup>
  </TreeViewItem>
  <TreeViewLeaf>package.json</TreeViewLeaf>
</TreeView>;

Anatomy

<TreeView>
  <TreeViewItem itemKey="..." label="...">
    <TreeViewGroup>
      <TreeViewItem itemKey="..." label="...">
        <TreeViewGroup>
          <TreeViewLeaf />
        </TreeViewGroup>
      </TreeViewItem>
      <TreeViewLeaf />
    </TreeViewGroup>
  </TreeViewItem>
</TreeView>

Sub-component	`data-slot`	Purpose	Required
`TreeView`	`tree-view`	Root container with keyboard navigation	Yes
`TreeViewItem`	`tree-view-item`	Collapsible node with chevron and label	Yes
`TreeViewGroup`	`tree-view-group`	Animated collapsible container for children	Yes
`TreeViewLeaf`	`tree-view-leaf`	Terminal node (no children)	No

Examples

Default expanded

<TreeView defaultExpandAll>
  <TreeViewItem itemKey="docs" label="docs">
    <TreeViewGroup>
      <TreeViewLeaf>getting-started.md</TreeViewLeaf>
      <TreeViewLeaf>api-reference.md</TreeViewLeaf>
    </TreeViewGroup>
  </TreeViewItem>
</TreeView>

Controlled expanded keys

const [expandedKeys, setExpandedKeys] = useState(new Set(["src"]))

<TreeView expandedKeys={expandedKeys} onExpandedKeysChange={setExpandedKeys}>
  <TreeViewItem itemKey="src" label="src">
    <TreeViewGroup>
      <TreeViewLeaf>index.tsx</TreeViewLeaf>
    </TreeViewGroup>
  </TreeViewItem>
</TreeView>

Styling

Data Slots

Slot name	Element
`tree-view`	Root `div` with `role="tree"`
`tree-view-item`	Collapsible node row with chevron
`tree-view-item-icon`	Chevron icon (rotates when expanded)
`tree-view-item-label`	Label text
`tree-view-group`	Animated collapsible panel for children
`tree-view-leaf`	Terminal item row

Customization Examples

/* Custom item hover color */
[data-slot="tree-view-item"]:hover,
[data-slot="tree-view-leaf"]:hover {
  @apply bg-primary/10;
}

/* Custom chevron color */
[data-slot="tree-view-item-icon"] {
  @apply text-primary;
}

API Reference

TreeView

Root container that provides context, keyboard navigation, and expanded state management.

Prop

Type

All standard div props are forwarded.

TreeViewItem

Collapsible node with a chevron icon and label. Uses Base UI Collapsible.Root internally.

Prop

Type

All standard div props are forwarded.

TreeViewGroup

Animated collapsible container for child items. Uses Base UI Collapsible.Panel.

Prop

Type

All standard div props are forwarded.

TreeViewLeaf

Terminal node (no children). Renders with extra left padding to align with item labels.

Prop

Type

All standard div props are forwarded.

Accessibility

Keyboard Interactions

Key	Action
`ArrowDown`	Moves focus to the next visible item
`ArrowUp`	Moves focus to the previous visible item
`ArrowRight`	Expands a collapsed item, or moves to first child if expanded
`ArrowLeft`	Collapses an expanded item, or moves to parent
`Home`	Moves focus to the first visible item
`End`	Moves focus to the last visible item
`Enter`/`Space`	Toggles expand/collapse on a tree item

ARIA Attributes

The root element has role="tree".
Each TreeViewItem and TreeViewLeaf has role="treeitem".
TreeViewItem has aria-expanded reflecting its expand state.
TreeViewGroup has role="group".
Depth-based indentation provides visual hierarchy.

On this page