Folder Tree

A customizable folder tree component for displaying hierarchical data with expandable nodes.

Installation

npx shadcn@latest add @scrollxui/folder-tree

Usage

import { FolderTree } from '@/components/ui/folder-tree';

<FolderTree.Root
  defaultExpanded={['root', 'folder1']}
  defaultSelected='file1'
  className='w-full'
>
  <FolderTree.Item id='root' label='Root Folder'>
    <FolderTree.Content>
      <FolderTree.Item id='folder1' label='Documents'>
        <FolderTree.Content>
          <FolderTree.Item id='file1' label='File 1.txt' />
          <FolderTree.Item id='file2' label='File 2.txt' />
          <FolderTree.Item id='file3' label='Image.png' />
        </FolderTree.Content>
      </FolderTree.Item>
    </FolderTree.Content>
  </FolderTree.Item>
</FolderTree.Root>

Examples

With Badges

API Reference

FolderTree.Root

The root component that provides context and manages global state.

Props

Property	Type	Default	Description
`defaultExpanded`	string[]	`[]`	IDs expanded by default.
`defaultSelected`	string	`null`	ID selected by default.
`onSelect`	(id, label) => void	`undefined`	Fires on select.
`id`	string	`"folder-tree"`	Tree ID.
`itemId`	string	`required`	Item ID.
`label`	string	`required`	Item label.
`icon`	LucideIcon	`Folder \| File`	Custom icon.
`badge`	string \| number	`—`	Right badge.
`modified`	boolean \| { content, className?, ariaLabel? }	`false`	Modified state.
`untracked`	boolean \| { content, className?, ariaLabel? }	`false`	Untracked state.
`className`	string	`—`	Custom style.
`children`	ReactNode	`—`	Nested items.