File tree

When to use #

Use it for

File and project browsers.
Any hierarchy where depth matters.

Skip it when

The list is flat; use a list.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/file-tree.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useState } from "react"
import { FileTree } from "@/components/ui/file-tree"

export function ProjectFiles() {
  const [file, setFile] = useState("readme");
  return (
    <div className="w-full max-w-xs">
      <FileTree
        nodes={[
          { id: "src", name: "src", children: [{ id: "app", name: "app.tsx" }, { id: "index", name: "index.ts" }] },
          { id: "docs", name: "docs", children: [{ id: "readme", name: "README.md" }] },
          { id: "pkg", name: "package.json" },
        ]}
        value={file}
        onValueChange={setFile}
      />
    </div>
  );
}

API reference #

FileTree

component

PropTypeDefault

labelstring"Files"

nodes *readonly FileTreeNode[]—

valuestring—

onValueChange((value: string) => void)—

classNamestring—

It exposes treeitem and tree semantics, with aria-expanded, aria-selected, aria-current, aria-hidden and aria-label kept in step with state.

KeyBehaviour

→Moves to the next item or value.

←Moves to the previous item or value.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.