blatui

Components

Tree

A collapsible, keyboard-navigable hierarchical tree view with folder and file icons.

php artisan blatui:add tree
  • Documents
    • Work
      • Q3 Report
      • Roadmap
    • Personal
  • Pictures
    • Vacation
    • Screenshots
  • README.txt 
@php
    $items = [
        [
            'label' => 'Documents',
            'expanded' => true,
            'children' => [
                [
                    'label' => 'Work',
                    'children' => [
                        ['label' => 'Q3 Report'],
                        ['label' => 'Roadmap'],
                    ],
                ],
                ['label' => 'Personal'],
            ],
        ],
        [
            'label' => 'Pictures',
            'children' => [
                ['label' => 'Vacation'],
                ['label' => 'Screenshots'],
            ],
        ],
        ['label' => 'README.txt'],
    ];
@endphp

<x-ui.tree :items="$items" aria-label="File navigator" class="w-64" />

Expanded

  • app
    • Http
      • Controllers
        • HomeController.php
        • UserController.php
      • Middleware
    • Models
      • User.php
  • config
    • app.php 
@php
    // `expanded => true` seeds a parent open on first render. Deeply nested
    // branches can be opened independently.
    $items = [
        [
            'label' => 'app',
            'expanded' => true,
            'children' => [
                [
                    'label' => 'Http',
                    'expanded' => true,
                    'children' => [
                        [
                            'label' => 'Controllers',
                            'expanded' => true,
                            'children' => [
                                ['label' => 'HomeController.php', 'icon' => 'file-code'],
                                ['label' => 'UserController.php', 'icon' => 'file-code'],
                            ],
                        ],
                        ['label' => 'Middleware'],
                    ],
                ],
                [
                    'label' => 'Models',
                    'expanded' => true,
                    'children' => [
                        ['label' => 'User.php', 'icon' => 'file-code'],
                    ],
                ],
            ],
        ],
        [
            'label' => 'config',
            'children' => [
                ['label' => 'app.php', 'icon' => 'file-code'],
            ],
        ],
    ];
@endphp

<x-ui.tree :items="$items" aria-label="Application source" class="w-72" />

Files

  • src
    • components
      • Button.vue
      • Modal.vue
    • app.js
    • styles.css
  • public
    • logo.svg
    • favicon.ico
  • package.json
  • README.md 
@php
    // Leaf items get a lucide `icon`; parents auto-render folder / folder-open.
    $items = [
        [
            'label' => 'src',
            'expanded' => true,
            'children' => [
                [
                    'label' => 'components',
                    'children' => [
                        ['label' => 'Button.vue', 'icon' => 'file-code'],
                        ['label' => 'Modal.vue', 'icon' => 'file-code'],
                    ],
                ],
                ['label' => 'app.js', 'icon' => 'file-code'],
                ['label' => 'styles.css', 'icon' => 'file-type'],
            ],
        ],
        [
            'label' => 'public',
            'children' => [
                ['label' => 'logo.svg', 'icon' => 'file-image'],
                ['label' => 'favicon.ico', 'icon' => 'file-image'],
            ],
        ],
        ['label' => 'package.json', 'icon' => 'file-json'],
        ['label' => 'README.md', 'icon' => 'file-text'],
    ];
@endphp

<x-ui.tree :items="$items" aria-label="Project files" class="w-64" />