Core ElementsFree

File Tree

A collapsible, indented tree of folders and files.

Usage

bash

npx wunderui-cli add file-tree

Writes the source into your project with its dependencies and, on first use, the styles — see Installation.

Then import what you need:

tsx

import { FileTree, FileTreeNode } from "@/components/wunderui/file-tree"

Folders that open and close to show what’s inside.

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

The tree beside an open file, as in an editor or a repository view.

Explorer

src/components/button.tsx

export function Button({ children }) {
  return <button className="btn">{children}</button>
}