Tree View

npx shadcn@latest add https://ui.saasflare.io/r/tree-view.json

pnpm add @saasflare/ui

"use client"import { TreeView, type TreeNode } from "@saasflare/ui"const FILES: TreeNode[] = [    {        id: "src",        label: "src",        children: [            {                id: "src/app",                label: "app",                children: [                    { id: "src/app/layout", label: "layout.tsx" },                    { id: "src/app/page", label: "page.tsx" },                ],            },            {                id: "src/lib",                label: "lib",                children: [{ id: "src/lib/cn", label: "cn.ts" }],            },            { id: "src/middleware", label: "middleware.ts" },        ],    },    { id: "package", label: "package.json" },    { id: "tsconfig", label: "tsconfig.json" },]/** A file explorer rendered from hierarchical tree data. */export function Demo() {    return (        <TreeView            className="w-full max-w-sm"            data={FILES}            defaultExpanded={["src", "src/app"]}            defaultSelected="src/app/page"        />    )}

"use client"import { useState } from "react"import { TreeView, type TreeNode } from "@saasflare/ui"const TREE: TreeNode[] = [    {        id: "workspace",        label: "Workspace",        children: [            { id: "projects", label: "Projects" },            { id: "members", label: "Members" },            {                id: "settings",                label: "Settings",                children: [                    { id: "settings/billing", label: "Billing" },                    { id: "settings/api", label: "API keys" },                ],            },        ],    },]/** A tree with controlled selection rendered alongside the active node id. */export function Demo() {    const [selected, setSelected] = useState<string | null>("settings/billing")    return (        <div className="flex w-full max-w-sm flex-col gap-3">            <TreeView                data={TREE}                defaultExpanded={["workspace", "settings"]}                selected={selected}                onSelect={setSelected}            />            <p className="text-sm text-muted-foreground">                Selected: <span className="font-medium text-foreground">{selected ?? "none"}</span>            </p>        </div>    )}