Tree View

Component

About

An accessible, keyboard-navigable tree for browsing nested data like folders and files, with expand/collapse, selection and full arrow-key/Home/End support.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tree View to your project and fits it to your theme.

Code

How Tree View is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import TreeView from "@/components/ui/tree-view";
import { Surface, Tag } from "klyvui";
import { Folder, FileText, Wallet } from "lucide-react";
import { useState } from "react";

export default function TreeViewDemo() {
  const [selected, setSelected] = useState("current");
  return (
    <Surface variant="card" padding="md" className="w-full max-w-[340px]">
      <TreeView
        label="Accounts"
        selected={selected}
        onSelect={setSelected}
        defaultExpanded={["personal"]}
        nodes={[
          {
            id: "personal",
            label: "Personal",
            icon: Folder,
            children: [
              {
                id: "current",
                label: "Current account",
                icon: Wallet,
                meta: <Tag size="sm">£8.4k</Tag>,
              },
              { id: "savings", label: "Savings", icon: Wallet },
              {
                id: "statements",
                label: "Statements",
                icon: Folder,
                children: [
                  { id: "sep", label: "September 2026", icon: FileText },
                  { id: "oct", label: "October 2026", icon: FileText },
                ],
              },
            ],
          },
          {
            id: "business",
            label: "Business",
            icon: Folder,
            children: [
              { id: "trading", label: "Trading account", icon: Wallet },
            ],
          },
        ]}
      />
    </Surface>
  );
}