fetaUI
GitHub

File Tree

A file explorer: folders with chevrons, files with type icons, git marks and a selected row.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/file-tree
Playground
Explorer
acme-web
app
globals.css
layout.tsx
page.tsx
components
ui
button.tsx
dialog.tsxM
input.tsx
tooltip.tsxU
header.tsx
package.json
Collapsed
Explorer
acme-web
package.json
Icons animation
Motion

Installation

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

Accessibility

  • Built on Tree, so roles and keys come with it.
  • Git marks are letters, so status is never colour alone.

Motion

  • Same as Tree. The header button opens every folder, or collapses back to the top level.
  • With reduced motion, rows appear in place.

Responsive behavior

  • 280 wide on Web and 358 on Mobile.

Performance

  • Nodes are memoized from files, and rendering is Tree's: closed folders do not render.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import FileTree from @/components/fetaui/file-tree after installing it. files is required.
  • Ids are slash joined paths, so defaultExpanded and selected use the full path from the root.
  • status takes M or U. onSelect reports the path, and a folder also reports when it toggles.
  • Icons follow the file extension. Composes Tree, TreeCard and IconButton.
/docs/components/file-tree/markdown
PreviousTree
NextStatus Island

Related

TreeComponentHierarchies in a Soft card: files, navigation with counts, checkboxes with parent states, and indent guides.Editor TabsComponentFile tabs for editors: the active tab sits on the surface, and unsaved files carry a warning dot.Tree ViewComponentA file tree with guides, inline renaming and the selected path in the footer.Code BlockComponentCode on the Soft tray: file name and Copy above, numbered lines in an inset card, with highlights and diffs.SidebarComponentNav Items on a tray, with the active page lifted onto surface. Collapses to an icon rail.