# Tree View
URL: /docs/web/components/tree-view

Tree View component with multiple variants and sizes.

**Demo:**

```tsx
'use client';
// @custom-demo

import { useCallback, useState, type ReactNode } from 'react';

import {
  TreeView,
  type TreeViewCheckboxPosition,
  type TreeViewItem,
  type TreeViewMenuItem
} from '@docyrus/ui/components/tree-view';
import { Button } from '@docyrus/ui/primitives/ui/button';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@docyrus/ui/primitives/ui/select';
import { Switch } from '@docyrus/ui/primitives/ui/switch';
import { cn } from '@docyrus/ui/primitives/lib/utils';
import {
  File, FileText, Folder, Image, Music, Video
} from 'lucide-react';

/* ------------------------------------------------------------------ */
/*  Sample data                                                        */
/* ------------------------------------------------------------------ */

function makeSampleData(): TreeViewItem[] {
  return [
    {
      id: 'src',
      name: 'src',
      type: 'folder',
      children: [
        {
          id: 'components',
          name: 'components',
          type: 'folder',
          children: [
            {
              id: 'button-tsx', name: 'button.tsx', type: 'file', checked: true
            },
            {
              id: 'dialog-tsx', name: 'dialog.tsx', type: 'file', checked: false
            },
            {
              id: 'input-tsx', name: 'input.tsx', type: 'file', checked: true
            },
            {
              id: 'tree-view-tsx', name: 'tree-view.tsx', type: 'file', checked: false
            }
          ]
        },
        {
          id: 'hooks',
          name: 'hooks',
          type: 'folder',
          children: [
            {
              id: 'use-debounce', name: 'use-debounce.ts', type: 'file', checked: true
            },
            {
              id: 'use-media-query', name: 'use-media-query.ts', type: 'file', checked: false
            }
          ]
        },
        {
          id: 'lib',
          name: 'lib',
          type: 'folder',
          children: [
            {
              id: 'utils-ts', name: 'utils.ts', type: 'file', checked: true
            }
          ]
        },
        {
          id: 'app-tsx', name: 'App.tsx', type: 'file', checked: true
        },
        {
          id: 'main-tsx', name: 'main.tsx', type: 'file', checked: true
        }
      ]
    },
    {
      id: 'public',
      name: 'public',
      type: 'folder',
      children: [
        {
          id: 'favicon', name: 'favicon.ico', type: 'image', checked: false
        },
        {
          id: 'logo-svg', name: 'logo.svg', type: 'image', checked: false
        },
        {
          id: 'assets',
          name: 'assets',
          type: 'folder',
          children: [
            {
              id: 'hero-png', name: 'hero.png', type: 'image', checked: false
            },
            {
              id: 'bg-mp4', name: 'background.mp4', type: 'video', checked: false
            },
            {
              id: 'notification-mp3', name: 'notification.mp3', type: 'audio', checked: false
            }
          ]
        }
      ]
    },
    {
      id: 'package-json', name: 'package.json', type: 'file', checked: true
    },
    {
      id: 'readme', name: 'README.md', type: 'file', checked: false
    },
    {
      id: 'tsconfig', name: 'tsconfig.json', type: 'file', checked: false
    }
  ];
}

/* ------------------------------------------------------------------ */
/*  Icon map                                                           */
/* ------------------------------------------------------------------ */

const FILE_ICON_MAP: Record<string, ReactNode> = {
  folder: ,
  file: ,
  image: ,
  video: ,
  audio: 
};

/* ------------------------------------------------------------------ */
/*  Demo                                                               */
/* ------------------------------------------------------------------ */

export function TreeViewDemo() {
  type Variant = 'default' | 'outline' | 'ghost';
  type Size = 'default' | 'sm' | 'lg';

  const [variant, setVariant] = useState
      </div>

      {/* Configure panel */}
      <div
        className={cn(
          'grid transition-[grid-template-rows] duration-300 ease-in-out',
          open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
        )}>
        <div className="overflow-hidden">
          <div className="mb-4 grid gap-6 rounded-lg border border-border bg-muted/30 p-4">
            <div className="flex flex-wrap items-center gap-4">
              <div className="space-y-1.5">
                <span className="text-xs font-medium">Variant</span>
                
                  
                    
                    
                  
                
              </div>
              <div className="space-y-1.5">
                <span className="text-xs font-medium">Size</span>
                
                  
                    
                    
                  
                
              </div>
              <div className="space-y-1.5">
                <span className="text-xs font-medium">Checkbox Position</span>
                
                  
                    
                  
                
              </div>
              <label className="flex items-center gap-2">
                
                <span className="text-xs">Checkboxes</span>
              </label>
              <label className="flex items-center gap-2">
                
                <span className="text-xs">Expand All</span>
              </label>
              <label className="flex items-center gap-2">
                
                <span className="text-xs">Info Tooltip</span>
              </label>
              <label className="flex items-center gap-2">
                
                <span className="text-xs">Drag &amp; Drop</span>
              </label>
            </div>
          </div>
        </div>
      </div>

      {/* Component preview */}
      <div className="mx-auto max-w-xl space-y-3">
        
        <p className="text-center text-xs text-muted-foreground">
          Drag a row handle to reorder siblings, drop on a folder to move inside it,
          or drop between root items to promote something back to the top level.
        </p>
        {selection.length > 0 ? (
          <p className="text-center text-xs text-muted-foreground">
            Selected: {selection.map(s => s.name).join(', ')}
          </p>
        ) : null}
      </div>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  Utils                                                              */
/* ------------------------------------------------------------------ */

function setAllChecked(items: TreeViewItem[], checked: boolean): TreeViewItem[] {
  return items.map(it => ({
    ...it,
    checked,
    children: it.children ? setAllChecked(it.children, checked) : undefined
  }));
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-tree-view
```

**Dependencies:**
- [@dnd-kit/core](https://www.npmjs.com/package/@dnd-kit/core)
- [@dnd-kit/utilities](https://www.npmjs.com/package/@dnd-kit/utilities)
- [lucide-react](https://www.npmjs.com/package/lucide-react)
- [motion](https://www.npmjs.com/package/motion)
- [@emotion/is-prop-valid](https://www.npmjs.com/package/@emotion/is-prop-valid)
- [class-variance-authority](https://www.npmjs.com/package/class-variance-authority)

## Usage

```tsx
import {
  TreeView
} from "@docyrus/ui/components/tree-view";

<TreeView
  variant="default"
  size="sm"
  ref={...}
  data={TreeViewItem[]}
  showExpandAll
  showCheckboxes
  checkboxPosition="left"
  searchPlaceholder="..."
  selectionText="..."
  checkboxLabels={...}
  getIcon={() => {}}
  onSelectionChange={(selectedItems: TreeViewItem) = void[]}
  onAction={(action: string, items: TreeViewItem) = void[]}
  onCheckChange={() => {}}
  onDataChange={(nextData: TreeViewItem, details: TreeViewMoveDetails) = void[]}
  draggable
  canDropInside={() => {}}
  iconMap={...}
  menuItems={TreeViewMenuItem[]}
  showInfo
  maxHeight="..."
  defaultExpandedIds={Readonlystring[]}
  expandFolderOnRowClick
  onItemClick={() => {}}
  selectOnRowClick
/>
```

## Variants

| Variant | Description |
|---------|-------------|
| `default` | Default style |
| `outline` | Outline — `border-2 border-border` |
| `ghost` | Ghost — `border-transparent shadow-none` |

## Sizes

| Size | Description |
|------|-------------|
| `sm` | Small — `text-xs` |
| `default` | Default — `text-sm` |
| `lg` | Large — `text-base` |

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `variant` | `"default"` \| `"outline"` \| `"ghost"` | `"default"` |
| `size` | `"sm"` \| `"default"` \| `"lg"` | `"default"` |
| `ref` | `Ref<HTMLDivElement>` | — |
| `data` | `TreeViewItem[]` | — |
| `showExpandAll` | `boolean` | — |
| `showCheckboxes` | `boolean` | — |
| `checkboxPosition` | `TreeViewCheckboxPosition` | — |
| `searchPlaceholder` | `string` | — |
| `selectionText` | `string` | — |
| `checkboxLabels` | `{ check: string; uncheck: string }` | — |
| `getIcon` | `(item: TreeViewItem, depth: number) => ReactNode` | — |
| `onSelectionChange` | `(selectedItems: TreeViewItem[]) => void` | — |
| `onAction` | `(action: string, items: TreeViewItem[]) => void` | — |
| `onCheckChange` | `(item: TreeViewItem, checked: boolean) => void` | — |
| `onDataChange` | `(nextData: TreeViewItem[], details: TreeViewMoveDetails) => void` | — |
| `draggable` | `boolean` | — |
| `canDropInside` | `(item: TreeViewItem) => boolean` | — |
| `iconMap` | `TreeViewIconMap` | — |
| `menuItems` | `TreeViewMenuItem[]` | — |
| `showInfo` | `boolean` | — |
| `maxHeight` | `string` | — |
| `defaultExpandedIds` | `ReadonlyArray<string>` | — |
| `expandFolderOnRowClick` | `boolean` | — |
| `onItemClick` | `(item: TreeViewItem) => void` | — |
| `selectOnRowClick` | `boolean` | — |
| `className` | `string` | — |