Tree

A file tree or nested list that opens branch by branch, with search, keyboard navigation, and single, multiple or checkbox selection.

Base UI React Aria Radix UI

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/tree.json

Usage

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

const items: TreeItem[] = [
  {
    id: "app",
    label: "app",
    children: [
      { id: "app/page.tsx", label: "page.tsx" },
      { id: "app/layout.tsx", label: "layout.tsx" },
    ],
  },
  { id: "README.md", label: "README.md" },
]
 
<Tree
  aria-label="Project files"
  items={items}
  defaultExpanded={["app"]}
  onSelectedChange={(ids) => open(ids[0])}
  searchable
/>

Selection

single. The default. Clicking an item selects it. Cmd or Ctrl click adds to the selection.
multiple. Each click toggles an item.
checkbox. Each item gets a checkbox. Checking a branch checks every enabled leaf below it, and a branch with some leaves checked shows a dash. selected holds the checked leaves.
none. Items open and close but are never selected.

Keyboard

Up and Down move between visible items. Home and End jump to the first and last.
Right opens a branch, or moves to its first child when it is already open.
Left closes a branch, or moves to its parent.
Enter selects and calls onAction. Space selects.
* opens every branch at the same level.
Typing a letter moves to the next item that starts with it.

Props

items. { id, label, icon?, children?, badge?, disabled? }. Items with children are branches.
expanded, defaultExpanded, onExpandedChange. The open branches, by id.
selected, defaultSelected, onSelectedChange. The selected ids.
selectionMode. single, multiple, checkbox or none.
onAction. Called with the item on Enter or click.
searchable. Adds a search field. Matches are highlighted and every branch that holds one opens.
folderIcons. Folder and file icons for items without their own icon. On by default. Files get an icon from their extension.

Tooltip Typography

On This Page

Installation Usage Selection Keyboard Props