1Sponsor

Tree

Expandable/collapsible tree view

Terminal

Installation

pnpm dlx shadcn@latest add https://termcn.dev/r/tree.json

Usage

import { Tree } from "@/components/ui/tree";
<Tree
  defaultExpanded={["src"]}
  nodes={[
    {
      key: "src",
      label: "src",
      children: [
        { key: "index", label: "index.ts" },
        { key: "utils", label: "utils.ts" },
      ],
    },
    { key: "pkg", label: "package.json" },
  ]}
/>

API Reference

Tree

PropTypeDefault
nodesTreeNode[]required
onSelect(node: TreeNode) => voidundefined
defaultExpandedstring[][]
expandedIconstring"▼"
collapsedIconstring"▶"
leafIconstring"•"

TreeNode

PropTypeDefault
keystringrequired
labelstringrequired
childrenTreeNode[]undefined
iconstringundefined