Tree View

A modern, minimalist hierarchical tree component inspired by Notion and shadcn/ui. Features drag & drop, Livewire integration, and smooth animations.

Basic Usage

A clean, minimal tree view for files and folders:


<neura::tree :items="$items" :selectable="true" />

Variants

Minimal, clean variants for different use cases:

Default

Ghost

Bordered

<neura::tree :items="$items" variant="default" />
<neura::tree :items="$items" variant="ghost" />
<neura::tree :items="$items" variant="bordered" />

Drag & Drop

Intuitive drag and drop with visual feedback. Drop before, after, or inside folders:

💡 Try dragging items to reorganize the tree

<neura::tree 
    :items="$items"
    @tree:move="handleMove($event.detail)"
/>

<script>
function handleMove(detail) {
    console.log('Moved:', detail.item);
    console.log('To:', detail.target);
    console.log('Position:', detail.position); // 'before', 'after', 'inside'
}
</script>

Livewire Integration

Seamlessly sync tree state with Livewire properties:


<?php

class FileManager extends Component
{
    public $files = [
        [
            'id' => '1',
            'type' => 'folder',
            'name' => 'Documents',
            'children' => [...]
        ],
    ];

    public function render()
    {
        return view('livewire.file-manager');
    }
}


<neura::tree 
    :items="$files"
    wire-model="files"
    :selectable="true"
    @tree:select="$wire.handleSelect($event.detail)"
    @tree:move="$wire.handleMove($event.detail)"
/>

Sizes

Three size options for different contexts:

Small

Medium

Large

<neura::tree :items="$items" size="sm" />
<neura::tree :items="$items" size="md" />
<neura::tree :items="$items" size="lg" />

Selection

Single or multi-select support with keyboard modifiers:

Single Select

Multi-Select (Ctrl/Cmd + Click)


<neura::tree :items="$items" :selectable="true" />


<neura::tree :items="$items" :selectable="true" :multiSelect="true" />


<neura::tree 
    :items="$items"
    :selectable="true"
    @tree:select="console.log($event.detail)"
/>

With Badges

Add count badges or status indicators (Notion style):

$items = [
    [
        'id' => '1',
        'type' => 'folder',
        'name' => 'Inbox',
        'badge' => '3', // Badge text
        'children' => [...]
    ],
];

<neura::tree :items="$items" />

Real-World Example

A complete file manager interface:

Data Structure

$items = [
    [
        'id' => 'unique-id',        // Required: unique identifier
        'type' => 'folder',          // Required: 'folder' or 'file'/'document'
        'name' => 'Folder Name',     // Required: display name
        'label' => 'Custom Label',   // Optional: override name
        'icon' => 'code',            // Optional: 'image', 'code' or custom
        'iconClass' => 'text-blue-500', // Optional: custom icon color
        'badge' => '5',              // Optional: badge text/number
        'children' => [              // Optional: nested items (for folders)
            [...],
        ],
    ],
];

Properties

Property	Type	Default	Description
items	array	[]	Tree data structure
variant	string	default	Style variant (default, ghost, bordered)
size	string	md	Size (sm, md, lg)
selectable	boolean	false	Enable item selection
multiSelect	boolean	false	Enable multi-select (Ctrl/Cmd + click)
showIcons	boolean	true	Show file/folder icons
expandAll	boolean	false	Expand all folders by default
onlyFolders	boolean	false	Show only folders, hide files
wireModel	string	null	Livewire property name for two-way binding

Events

Event	Payload	Description
tree:select	{ selected: [], item }	Fired when selection changes
tree:move	{ item, target, position, items }	Fired when an item is moved via drag & drop