Tree View

Nested tree view with expandable nodes, rotating chevrons, depth indentation and ARIA tree roles. Suited to file explorers and nested category lists in React.

src/registry/ui/tree-view.tsx/r/tree-view.json

Installation#

bash
npx shadcn@latest add @minidev/tree-view

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/tree-view.json

Usage#

tsx
import { TreeView } from "@/components/ui/tree-view"

export function Example() {
  return (
    <TreeView className="max-w-sm rounded-xl border border-border p-2" nodes={[
      { id: "app", label: "app", children: [
        { id: "gallery", label: "gallery" },
        { id: "docs", label: "docs" },
      ]},
      { id: "registry", label: "registry", children: [
        { id: "ui", label: "ui" },
        { id: "blocks", label: "blocks" },
      ]},
    ]} />
  )
}

API reference#

TreeView props
PropTypeDefault
nodesTreeNode[]SAMPLE_NODES
classNamestring-

Dependencies#

npm

lucide-react

Built from

No other MiniDev files

Examples#

All navigation components

Learn more