Laravel Tree View Component

Pro

Hierarchical tree view with expandable nodes, icons, and optional selection for displaying nested data structures.

A Tree View built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::tree>

Try it live in the docs Get Aura Pro

Installation

composer require bluestarsystem/aura-ui

The Tree View is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →

Usage

<x-aura::tree>
    <x-aura::tree.node label="Documents" icon="folder">
        <x-aura::tree.node label="report.pdf" icon="file" />
        <x-aura::tree.node label="invoice.xlsx" icon="file" />
    </x-aura::tree.node>
    <x-aura::tree.node label="Images" icon="folder">
        <x-aura::tree.node label="photo.jpg" icon="image" />
    </x-aura::tree.node>
</x-aura::tree>

See the full API, props and live examples in the Tree View documentation.

Overview

The Tree component renders hierarchical data as an expandable tree structure. Each node can have child nodes, custom icons, and optional selection behavior. It is useful for file browsers, category hierarchies, organizational charts, and any nested data display. Built with Alpine.js for smooth expand/collapse animations.

Props

Tree

Prop	Type	Default	Description
`selectable`	`bool`	`false`	Enable clicking nodes to select them.
`expandAll`	`bool`	`false`	Expand all nodes by default.

Tree Node

Prop	Type	Default	Description
`label`	`string`	`''`	Node display text.
`icon`	`string\|null`	`null`	Heroicon name for the node icon.
`children`	`array`	`[]`	Array of child node data for programmatic rendering (alternative to slot-based children).