Code Tree

A flexible tree view component with collapsible nodes, selection, and animations.

Lucide

Documents

Media

Settings

Installation

npx dedevs-ui@latest add code-tree

Usage

import { TreeProvider, Tree, TreeItem } from "@repo/code/tree";

<TreeProvider>
  <Tree>
    <TreeItem nodeId="1" label="Item 1" hasChildren>
      <TreeItem nodeId="2" label="Item 2" level={1} />
    </TreeItem>
  </Tree>
</TreeProvider>

Examples

Custom Icons

Documents

Media

Settings

Data-driven Tree

Documents

Media

Settings

Props

TreeProvider

Prop	Type	Default
`indent?`	`number`	`20`
`animateExpand?`	`boolean`	`true`
`multiSelect?`	`boolean`	`false`
`selectable?`	`boolean`	`true`
`showIcons?`	`boolean`	`true`
`showLines?`	`boolean`	`true`
`onNodeExpand?`	`(nodeId: string, expanded: boolean) => void`	`undefined`
`onNodeClick?`	`(nodeId: string, data?: any) => void`	`undefined`
`onSelectionChange?`	`(selectedIds: string[]) => void`	`undefined`
`selectedIds?`	`string[]`	`[]`
`defaultExpandedIds?`	`string[]`	`[]`
`size?`	`"sm" \| "default" \| "lg"`	`"default"`
`variant?`	`"default" \| "outline" \| "ghost"`	`"default"`

TreeItem

Prop	Type	Default
`parentPath?`	`boolean[]`	`[]`
`isLast?`	`boolean`	`false`
`asChild?`	`boolean`	`false`
`variant?`	`"default" \| "ghost" \| "subtle"`	`"default"`
`hasChildren?`	`boolean`	`false`
`level?`	`number`	`0`
`data?`	`any`	`undefined`
`icon?`	`React.ReactNode`	`undefined`
`label?`	`string`	`undefined`
`nodeId?`	`string`	`undefined`

Code Tree

On this page