File Tree

A file tree component with expandable folders.

Configuring your account...

Please wait while we prepare everything for you

Usage

import { File, Folder, Tree } from "@/components/bynanaui/file-tree";

export function FileTreeDemo() {
  return (
    <Tree initialSelectedId="7" initialExpandedItems={["1", "2", "3"]}>
      <Folder element="src" value="1">
        <Folder value="2" element="app">
          <File value="3">
            <p>layout.tsx</p>
          </File>
        </Folder>
      </Folder>
    </Tree>
  );
}