Core ElementsFree

File Tree

A collapsible, indented tree of folders and files.

Usage

bash

npm install @wunderui/react

Then import what you need:

tsx

import { FileTree, FileTreeNode } from "@wunderui/react"

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>
}