Logo
Neura UI
Loading…
Logo
All pages 86

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:
blade 
<neura::tree :items="$items" :selectable="true" />

Variants

Minimal, clean variants for different use cases:
Preview

Default

Ghost

Bordered

Blade 
<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:

Livewire Integration

Seamlessly sync tree state with Livewire properties:
PHP 
<?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:
Preview

Small

Medium

Large

Blade 
<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)

Blade 
<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):

Real-World Example

A complete file manager interface:

Data Structure

JavaScript 
$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