Tree

Ready

Part of Data Display collection

Basic Tree

Hierarchical file system with expandable/collapsible nodes

src

components

Button.tsx

Card.tsx

Input.tsx

pages

styles.css

utils.ts

public

docs

package.json

tsconfig.json

Selectable Tree

Click nodes to select them and see the selected item below

Documents

Work

Personal

Vacation Photos

Resume.pdf

Checkable Tree

Check/uncheck nodes (automatically checks/unchecks all children)

Features

Hierarchical tree structure with unlimited nesting
Expand/collapse nodes with animation
Selectable nodes with visual feedback
Checkable nodes with cascade behavior
File type icons (folder, file, document, image, code)
Connection lines between parent and children
Default expanded nodes configuration

Installation

Import the Tree component and TreeNode type:

import { Tree, type TreeNode } from '@/components/ui/tree'

Usage Examples

Basic Tree

const data: TreeNode[] = [
  {
    id: '1',
    label: 'src',
    children: [
      { id: '1-1', label: 'Button.tsx', type: 'code' },
      { id: '1-2', label: 'Card.tsx', type: 'code' }
    ]
  },
  { id: '2', label: 'package.json', type: 'document' }
]

<Tree data={data} />

With Default Expanded Nodes

<Tree
  data={data}
  defaultExpanded={['1', '1-1']}
/>

Selectable Tree

<Tree
  data={data}
  selectable
  onSelect={(node) => console.log('Selected:', node)}
/>

Checkable Tree

<Tree
  data={data}
  checkable
  onCheck={(checkedIds) => console.log('Checked:', checkedIds)}
/>

API Reference

Tree Props

Prop	Type	Default	Description
data	TreeNode[]	required	Array of root tree nodes
defaultExpanded	string[]	[]	IDs of initially expanded nodes
selectable	boolean	false	Enable node selection
checkable	boolean	false	Enable checkboxes
onSelect	(node) => void	-	Callback when node is selected
onCheck	(ids) => void	-	Callback with checked node IDs
className	string	-	Additional CSS classes

TreeNode Type

Property	Type	Required	Description
id	string	Yes	Unique node identifier
label	string	Yes	Node display label
type	'file' \| 'document' \| 'image' \| 'code'	No	File type for icon display
children	TreeNode[]	No	Child nodes (makes this a folder)