File Tree

A tree view of a folder/file structure, with expand and collapse animations, depth guide lines, and icons chosen by file extension.

Presents a folder and file hierarchy with animation: click a folder to expand it at a spring rhythm, its children reveal row by row with a stagger, and icons are matched automatically by file extension.

Loading preview…

npx shadcn@latest add https://webberui.com/r/file-tree.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Levels expanded by defaultdefaultExpandedDepth

Stagger (s)stagger

0.03

Show hierarchy guide linesshowLines

Indent (px)indent

<FileTree />

Installation

npx shadcn@latest add https://webberui.com/r/file-tree.json

Or, once registries are configured in components.json, install it as @webberui/file-tree.

Usage

import { FileTree, type FileTreeNode } from "@/components/ui/file-tree";

const tree: FileTreeNode[] = [
  {
    name: "app",
    defaultOpen: true,
    children: [
      { name: "layout.tsx" },
      { name: "page.tsx", badge: "M" },
    ],
  },
  { name: "package.json" },
];

<FileTree data={tree} defaultExpandedDepth={1} />;

A node with children (even an empty array) counts as a folder; otherwise it counts as a file.

Props

Prop	Type	Default	Description
`data`	`FileTreeNode[]`	—	The tree data
`defaultExpandedDepth`	`number`	`1`	Folders within this depth are expanded by default (`0` collapses everything)
`stagger`	`number`	`0.03`	Reveal interval between rows (seconds), also exposed as `--wb-file-stagger`
`showLines`	`boolean`	`true`	Whether to show the indentation depth guide lines
`indent`	`number`	`16`	Indentation unit per level (px)
`className`	`string`	—	Forwarded to the outermost container

FileTreeNode

Field	Type	Description
`name`	`string`	Display name
`children`	`FileTreeNode[]`	Child nodes; their presence means this is a folder
`defaultOpen`	`boolean`	Whether this folder is expanded by default
`icon`	`LucideIcon`	Override the node's icon
`badge`	`string`	Badge text on the right, for example `M` or `A`

Accessibility

The outer element is role="tree" and each node is role="treeitem", with folders carrying aria-expanded
When the user has "reduce motion" enabled at the system level, expanding, collapsing, and the row-by-row reveal all switch instantly instead
The first render matches SSR and whether to enable animation is only decided after mount, which avoids a hydration mismatch