Tree

Data Display

Navigation

Hierarchical tree structure with expandable nodes, selection, and checkboxes.

Preview

File system tree with expandable folders

src

components

Button.tsx

Card.tsx

Input.tsx

pages

styles.css

utils.ts

public

package.json

Selectable Tree

Click nodes to select them

Documents

Work

Personal

Photos

Resume.pdf

Checkable Tree

Check nodes with cascade behavior

Props

Component API reference

Tree

Prop	Type	Default	Description
`data*`	`TreeNode[]`	—	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: TreeNode) => void`	—	Callback when node is selected
`onCheck`	`(ids: Set<string>) => void`	—	Callback with checked node IDs
`className`	`string`	—	Additional CSS classes

TreeNode Type

Prop	Type	Default	Description
`id*`	`string`	—	Unique node identifier
`label*`	`string`	—	Node display label
`type`	`'file' \| 'document' \| 'image' \| 'code'`	—	File type for icon display
`children`	`TreeNode[]`	—	Child nodes (makes this a folder)

Usage

Import and implementation examples

import { Tree, type TreeNode } from '@/components/ui/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' }
]

// Basic tree
<Tree data={data} />

// With default expanded nodes
<Tree
  data={data}
  defaultExpanded={['1']}
/>

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

// Checkable tree with cascade
<Tree
  data={data}
  checkable
  onCheck={(ids) => console.log('Checked:', ids)}
/>

Features

Built-in functionality

Unlimited nesting: Hierarchical tree structure with any depth
Expand/collapse: Toggle folders with smooth animation
Selectable nodes: Single selection with visual feedback
Checkable nodes: Checkboxes with cascade behavior
File type icons: Auto icons for folder, file, document, image, code
Connection lines: Visual lines between parent and children
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses role="tree" and role="treeitem"aria-expanded for expandable nodesaria-selected for selectable nodesaria-checked for checkable nodes

Keyboard Navigation

Key	Action
`Arrow Up/Down`	Navigate between visible nodes
`Arrow Left`	Collapse node or move to parent
`Arrow Right`	Expand node or move to first child
`Enter / Space`	Select or toggle checkbox

Notes

Full keyboard navigation support
Focus management within tree structure
Screen reader announces node state

Related Components

List Item Menu Accordion