Tree view

Navigate nested folders and structured content.

npx shadcn@latest add @silicon-ui/tree-view
datanavigation
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/tree-view

Manually

  1. Install the dependencies.

    npm install lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/tree-view/tree-view.tsx
    • components/silicon-ui/tree-view/tree-view.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { TreeView } from "@/components/silicon-ui/tree-view/tree-view";

API reference

PropTypeDefault
nodes*TreeNode[]—
defaultExpandedIdsstring[][]
expandedIdsstring[]—
onExpandedChange(expandedIds: string[]) => void—
onSelect(node: TreeNode) => void—
aria-labelstring—

Dependencies

npm
lucide-reactmotion
Registry
silicon-motion-tokens