fetaUI
GitHub

Tree View

A file tree with guides, inline renaming and the selected path in the footer.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/tree-view
Playground

EXPLORER

  • src
  • components
  • button.tsx
  • button.module.css
  • page.tsxM
  • README.md

6 items

Selected

EXPLORER

  • src
  • components
  • button.tsx
  • button.module.css
  • page.tsxM
  • README.md

src/components/button.tsx

Collapsed

EXPLORER

  • README.md

6 items

Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/tree-view

Accessibility

  • Uses tree and treeitem with aria-level, aria-expanded and aria-selected.
  • One roving tab stop.
  • Git marks are labelled.

Motion

  • Chevrons turn 90° over 240 ms.
  • Hover washes 4% and selection 8%.
  • With reduced motion, chevrons swap at once.

Responsive behavior

  • 300 wide on Web and 358 on Mobile.
  • Rows grow to 44 on Mobile.

Performance

  • Only open branches render. The flat list is memoized on nodes and open state.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import TreeView and the TreeNode type. Props: label, nodes, heading, defaultExpanded, defaultSelected, onRename, onSelect, onAdd.
  • Arrow keys move, Right and Left open and close, and F2 renames.
  • onRename fires on Enter and onSelect gives the id and path. The plus only shows with onAdd.
/docs/components/tree-view/markdown
PreviousTree Table
NextSortable List

Related

File TreeComponentA file explorer: folders with chevrons, files with type icons, git marks and a selected row.TreeComponentHierarchies in a Soft card: files, navigation with counts, checkboxes with parent states, and indent guides.Tree TableComponentRows that roll up, with guides for depth. Selecting rows totals their spend in the footer.JSON ViewComponentAn API response explorer: a tree you can fold, search and copy from.