Tree

Usage

import { Tree } from '@acronis-platform/shadcn-uikit';

Basic

A simple tree with expandable nodes.

View source

import { Tree, TreeNode } from '@acronis-platform/shadcn-uikit/react';

const organizationData: TreeNode[] = [
  {
    id: 'company',
    label: 'Company',
    children: [
      {
        id: 'engineering',
        label: 'Engineering',
        children: [
          {
            id: 'frontend',
            label: 'Frontend Team',
            children: [
              { id: 'john', label: 'John Doe' },
              { id: 'jane', label: 'Jane Smith' },
            ],
          },
          {
            id: 'backend',
            label: 'Backend Team',
            children: [
              { id: 'bob', label: 'Bob Johnson' },
              { id: 'alice', label: 'Alice Williams' },
            ],
          },
        ],
      },
      {
        id: 'design',
        label: 'Design',
        children: [
          { id: 'sarah', label: 'Sarah Brown' },
          { id: 'mike', label: 'Mike Davis' },
        ],
      },
      {
        id: 'marketing',
        label: 'Marketing',
        children: [
          { id: 'emma', label: 'Emma Wilson' },
          { id: 'david', label: 'David Martinez' },
        ],
      },
    ],
  },
];

export function TreeBasic() {
  return <Tree data={organizationData} defaultExpanded={['company']} />;
}

With Icons

Tree nodes with custom icons.

View source

import { Tree, TreeNode } from '@acronis-platform/shadcn-uikit/react';
import {
  FileIcon,
  FileTextIcon,
  FolderIcon,
  ImageIcon,
} from '@acronis-platform/shadcn-uikit';
import { MusicIcon } from '../icons/missing-icons';
const fileSystemData: TreeNode[] = [
  {
    id: '1',
    label: 'Documents',
    icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
    children: [
      {
        id: '1-1',
        label: 'Work',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: '1-1-1',
            label: 'Project.docx',
            icon: <FileTextIcon className="h-4 w-4 text-gray-500" />,
          },
          {
            id: '1-1-2',
            label: 'Report.pdf',
            icon: <FileIcon className="h-4 w-4 text-red-500" />,
          },
        ],
      },
      {
        id: '1-2',
        label: 'Personal',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: '1-2-1',
            label: 'Resume.pdf',
            icon: <FileIcon className="h-4 w-4 text-red-500" />,
          },
        ],
      },
    ],
  },
  {
    id: '2',
    label: 'Pictures',
    icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
    children: [
      {
        id: '2-1',
        label: 'Vacation',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: '2-1-1',
            label: 'beach.jpg',
            icon: <ImageIcon className="h-4 w-4 text-green-500" />,
          },
          {
            id: '2-1-2',
            label: 'sunset.jpg',
            icon: <ImageIcon className="h-4 w-4 text-green-500" />,
          },
        ],
      },
      {
        id: '2-2',
        label: 'Family',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: '2-2-1',
            label: 'portrait.jpg',
            icon: <ImageIcon className="h-4 w-4 text-green-500" />,
          },
        ],
      },
    ],
  },
  {
    id: '3',
    label: 'MusicIcon',
    icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
    children: [
      {
        id: '3-1',
        label: 'Favorites',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: '3-1-1',
            label: 'song1.mp3',
            icon: <MusicIcon className="h-4 w-4 text-purple-500" />,
          },
          {
            id: '3-1-2',
            label: 'song2.mp3',
            icon: <MusicIcon className="h-4 w-4 text-purple-500" />,
          },
        ],
      },
    ],
  },
];

export function TreeWithIcons() {
  return <Tree data={fileSystemData} showIcon defaultExpanded={['1', '2']} />;
}

With Checkboxes

Tree nodes with selectable checkboxes.

View source

import { Tree, TreeNode } from '@acronis-platform/shadcn-uikit/react';

const organizationData: TreeNode[] = [
  {
    id: 'company',
    label: 'Company',
    children: [
      {
        id: 'engineering',
        label: 'Engineering',
        children: [
          {
            id: 'frontend',
            label: 'Frontend Team',
            children: [
              { id: 'john', label: 'John Doe' },
              { id: 'jane', label: 'Jane Smith' },
            ],
          },
          {
            id: 'backend',
            label: 'Backend Team',
            children: [
              { id: 'bob', label: 'Bob Johnson' },
              { id: 'alice', label: 'Alice Williams' },
            ],
          },
        ],
      },
      {
        id: 'design',
        label: 'Design',
        children: [
          { id: 'sarah', label: 'Sarah Brown' },
          { id: 'mike', label: 'Mike Davis' },
        ],
      },
      {
        id: 'marketing',
        label: 'Marketing',
        children: [
          { id: 'emma', label: 'Emma Wilson' },
          { id: 'david', label: 'David Martinez' },
        ],
      },
    ],
  },
];

export function TreeWithCheckboxes() {
  return (
    <Tree
      data={organizationData}
      showCheckbox
      defaultExpanded={['company', 'engineering']}
      defaultChecked={['john', 'jane']}
    />
  );
}

With Icons and Checkboxes

Tree combining both icons and checkboxes.

View source

import { Tree, TreeNode } from '@acronis-platform/shadcn-uikit/react';
import {
  FileIcon,
  FileTextIcon,
  FolderIcon,
  ImageIcon,
} from '@acronis-platform/shadcn-uikit';
import { MusicIcon } from '../icons/missing-icons';
const fileSystemData: TreeNode[] = [
  {
    id: '1',
    label: 'Documents',
    icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
    children: [
      {
        id: '1-1',
        label: 'Work',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: '1-1-1',
            label: 'Project.docx',
            icon: <FileTextIcon className="h-4 w-4 text-gray-500" />,
          },
          {
            id: '1-1-2',
            label: 'Report.pdf',
            icon: <FileIcon className="h-4 w-4 text-red-500" />,
          },
        ],
      },
      {
        id: '1-2',
        label: 'Personal',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: '1-2-1',
            label: 'Resume.pdf',
            icon: <FileIcon className="h-4 w-4 text-red-500" />,
          },
        ],
      },
    ],
  },
  {
    id: '2',
    label: 'Pictures',
    icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
    children: [
      {
        id: '2-1',
        label: 'Vacation',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: '2-1-1',
            label: 'beach.jpg',
            icon: <ImageIcon className="h-4 w-4 text-green-500" />,
          },
          {
            id: '2-1-2',
            label: 'sunset.jpg',
            icon: <ImageIcon className="h-4 w-4 text-green-500" />,
          },
        ],
      },
      {
        id: '2-2',
        label: 'Family',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: '2-2-1',
            label: 'portrait.jpg',
            icon: <ImageIcon className="h-4 w-4 text-green-500" />,
          },
        ],
      },
    ],
  },
  {
    id: '3',
    label: 'MusicIcon',
    icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
    children: [
      {
        id: '3-1',
        label: 'Favorites',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: '3-1-1',
            label: 'song1.mp3',
            icon: <MusicIcon className="h-4 w-4 text-purple-500" />,
          },
          {
            id: '3-1-2',
            label: 'song2.mp3',
            icon: <MusicIcon className="h-4 w-4 text-purple-500" />,
          },
        ],
      },
    ],
  },
];

export function TreeWithIconsAndCheckboxes() {
  return (
    <Tree
      data={fileSystemData}
      showIcon
      showCheckbox
      defaultExpanded={['1', '1-1']}
    />
  );
}

File System

Tree displaying a file system structure.

View source

import { Tree, TreeNode } from '@acronis-platform/shadcn-uikit/react';
import {
  FileIcon,
  FileTextIcon,
  FolderIcon,
  ImageIcon,
} from '@acronis-platform/shadcn-uikit';
import { MusicIcon } from '../icons/missing-icons';
const fileSystemData: TreeNode[] = [
  {
    id: '1',
    label: 'Documents',
    icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
    children: [
      {
        id: '1-1',
        label: 'Work',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: '1-1-1',
            label: 'Project.docx',
            icon: <FileTextIcon className="h-4 w-4 text-gray-500" />,
          },
          {
            id: '1-1-2',
            label: 'Report.pdf',
            icon: <FileIcon className="h-4 w-4 text-red-500" />,
          },
        ],
      },
      {
        id: '1-2',
        label: 'Personal',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: '1-2-1',
            label: 'Resume.pdf',
            icon: <FileIcon className="h-4 w-4 text-red-500" />,
          },
        ],
      },
    ],
  },
  {
    id: '2',
    label: 'Pictures',
    icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
    children: [
      {
        id: '2-1',
        label: 'Vacation',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: '2-1-1',
            label: 'beach.jpg',
            icon: <ImageIcon className="h-4 w-4 text-green-500" />,
          },
          {
            id: '2-1-2',
            label: 'sunset.jpg',
            icon: <ImageIcon className="h-4 w-4 text-green-500" />,
          },
        ],
      },
      {
        id: '2-2',
        label: 'Family',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: '2-2-1',
            label: 'portrait.jpg',
            icon: <ImageIcon className="h-4 w-4 text-green-500" />,
          },
        ],
      },
    ],
  },
  {
    id: '3',
    label: 'MusicIcon',
    icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
    children: [
      {
        id: '3-1',
        label: 'Favorites',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: '3-1-1',
            label: 'song1.mp3',
            icon: <MusicIcon className="h-4 w-4 text-purple-500" />,
          },
          {
            id: '3-1-2',
            label: 'song2.mp3',
            icon: <MusicIcon className="h-4 w-4 text-purple-500" />,
          },
        ],
      },
    ],
  },
];

export function TreeFileSystem() {
  return (
    <Tree
      data={fileSystemData}
      showIcon
      defaultExpanded={['1', '2', '3']}
      onNodeSelect={(id) => console.log('Selected:', id)}
    />
  );
}

Project Structure

Tree showing a project directory layout.

View source

import { Tree, TreeNode } from '@acronis-platform/shadcn-uikit/react';
import { FileTextIcon, FolderIcon } from '@acronis-platform/shadcn-uikit';
import { CodeIcon } from '../icons/missing-icons';
const projectData: TreeNode[] = [
  {
    id: 'src',
    label: 'src',
    icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
    children: [
      {
        id: 'components',
        label: 'components',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: 'button.tsx',
            label: 'Button.tsx',
            icon: <CodeIcon className="h-4 w-4 text-blue-400" />,
          },
          {
            id: 'input.tsx',
            label: 'Input.tsx',
            icon: <CodeIcon className="h-4 w-4 text-blue-400" />,
          },
        ],
      },
      {
        id: 'utils',
        label: 'utils',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: 'helpers.ts',
            label: 'helpers.ts',
            icon: <CodeIcon className="h-4 w-4 text-blue-400" />,
          },
        ],
      },
      {
        id: 'app.tsx',
        label: 'App.tsx',
        icon: <CodeIcon className="h-4 w-4 text-blue-400" />,
      },
    ],
  },
  {
    id: 'public',
    label: 'public',
    icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
    children: [
      {
        id: 'index.html',
        label: 'index.html',
        icon: <FileTextIcon className="h-4 w-4 text-orange-500" />,
      },
    ],
  },
  {
    id: 'package.json',
    label: 'package.json',
    icon: <FileTextIcon className="h-4 w-4 text-green-600" />,
  },
];

export function TreeProjectStructure() {
  return (
    <Tree
      data={projectData}
      showIcon
      defaultExpanded={['src', 'components']}
      onNodeToggle={(id) => console.log('Toggled:', id)}
    />
  );
}

Organization

Tree representing an organizational hierarchy.

View source

import { Tree, TreeNode } from '@acronis-platform/shadcn-uikit/react';

const organizationData: TreeNode[] = [
  {
    id: 'company',
    label: 'Company',
    children: [
      {
        id: 'engineering',
        label: 'Engineering',
        children: [
          {
            id: 'frontend',
            label: 'Frontend Team',
            children: [
              { id: 'john', label: 'John Doe' },
              { id: 'jane', label: 'Jane Smith' },
            ],
          },
          {
            id: 'backend',
            label: 'Backend Team',
            children: [
              { id: 'bob', label: 'Bob Johnson' },
              { id: 'alice', label: 'Alice Williams' },
            ],
          },
        ],
      },
      {
        id: 'design',
        label: 'Design',
        children: [
          { id: 'sarah', label: 'Sarah Brown' },
          { id: 'mike', label: 'Mike Davis' },
        ],
      },
      {
        id: 'marketing',
        label: 'Marketing',
        children: [
          { id: 'emma', label: 'Emma Wilson' },
          { id: 'david', label: 'David Martinez' },
        ],
      },
    ],
  },
];

export function TreeOrganization() {
  return (
    <Tree
      data={organizationData}
      defaultExpanded={['company', 'engineering', 'design']}
      onNodeSelect={(id) => console.log('Selected employee:', id)}
    />
  );
}

Controlled

Tree with externally managed expanded and selected state.

View source

import { Tree, TreeNode } from '@acronis-platform/shadcn-uikit/react';
import { FileTextIcon, FolderIcon } from '@acronis-platform/shadcn-uikit';
import { CodeIcon } from '../icons/missing-icons';
const projectData: TreeNode[] = [
  {
    id: 'src',
    label: 'src',
    icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
    children: [
      {
        id: 'components',
        label: 'components',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: 'button.tsx',
            label: 'Button.tsx',
            icon: <CodeIcon className="h-4 w-4 text-blue-400" />,
          },
          {
            id: 'input.tsx',
            label: 'Input.tsx',
            icon: <CodeIcon className="h-4 w-4 text-blue-400" />,
          },
        ],
      },
      {
        id: 'utils',
        label: 'utils',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: 'helpers.ts',
            label: 'helpers.ts',
            icon: <CodeIcon className="h-4 w-4 text-blue-400" />,
          },
        ],
      },
      {
        id: 'app.tsx',
        label: 'App.tsx',
        icon: <CodeIcon className="h-4 w-4 text-blue-400" />,
      },
    ],
  },
  {
    id: 'public',
    label: 'public',
    icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
    children: [
      {
        id: 'index.html',
        label: 'index.html',
        icon: <FileTextIcon className="h-4 w-4 text-orange-500" />,
      },
    ],
  },
  {
    id: 'package.json',
    label: 'package.json',
    icon: <FileTextIcon className="h-4 w-4 text-green-600" />,
  },
];

export function TreeControlled() {
  return (
    <Tree
      data={projectData}
      showIcon
      showCheckbox
      defaultExpanded={['src']}
      onNodeToggle={(id) => console.log('Node toggled:', id)}
      onNodeSelect={(id) => console.log('Node selected:', id)}
      onNodeCheck={(id, checked) => console.log('Node checked:', id, checked)}
    />
  );
}

Deep Nesting

Tree with deeply nested levels.

View source

import { Tree, TreeNode } from '@acronis-platform/shadcn-uikit/react';

const deepData: TreeNode[] = [
  {
    id: 'level1',
    label: 'Level 1',
    children: [
      {
        id: 'level2',
        label: 'Level 2',
        children: [
          {
            id: 'level3',
            label: 'Level 3',
            children: [
              {
                id: 'level4',
                label: 'Level 4',
                children: [
                  {
                    id: 'level5',
                    label: 'Level 5',
                  },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
];

export function TreeDeepNesting() {
  return (
    <Tree
      data={deepData}
      defaultExpanded={['level1', 'level2', 'level3', 'level4']}
    />
  );
}

Mixed Content

Tree with different content types per node.

View source

import { Tree, TreeNode } from '@acronis-platform/shadcn-uikit/react';
import {
  FolderIcon,
  ImageIcon,
  VideosIcon,
} from '@acronis-platform/shadcn-uikit';
import { MusicIcon } from '../icons/missing-icons';
const mixedData: TreeNode[] = [
  {
    id: 'media',
    label: 'Media Files',
    icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
    children: [
      {
        id: 'videos',
        label: 'Videos',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: 'video1',
            label: 'tutorial.mp4',
            icon: <VideosIcon className="h-4 w-4 text-red-500" />,
          },
          {
            id: 'video2',
            label: 'demo.mp4',
            icon: <VideosIcon className="h-4 w-4 text-red-500" />,
          },
        ],
      },
      {
        id: 'audio',
        label: 'Audio',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: 'audio1',
            label: 'podcast.mp3',
            icon: <MusicIcon className="h-4 w-4 text-purple-500" />,
          },
        ],
      },
      {
        id: 'images',
        label: 'Images',
        icon: <FolderIcon className="h-4 w-4 text-blue-500" />,
        children: [
          {
            id: 'img1',
            label: 'logo.png',
            icon: <ImageIcon className="h-4 w-4 text-green-500" />,
          },
          {
            id: 'img2',
            label: 'banner.jpg',
            icon: <ImageIcon className="h-4 w-4 text-green-500" />,
          },
        ],
      },
    ],
  },
];

export function TreeMixedContent() {
  return (
    <Tree
      data={mixedData}
      showIcon
      showCheckbox
      defaultExpanded={['media', 'videos', 'images']}
    />
  );
}

API Reference

Tree

Prop

Type

Edit on GitHub

Tree

On this page