Components

Org Chart

A top-down organisational chart with connector lines, rendered from a tree.

php artisan blatui:add org-chart

Avery Quinn Chief Executive Officer
- Jordan Lee VP, Engineering
  - Sam Rivera Eng Manager
  - Priya Nair Staff Engineer
- Morgan Diaz VP, Product
  - Chris Park Product Manager
- Riley Chen VP, Operations
  - Dana Cole Ops Lead
  - Noah Kim Finance Lead

@php
    $org = [
        'name' => 'Avery Quinn',
        'title' => 'Chief Executive Officer',
        'children' => [
            [
                'name' => 'Jordan Lee',
                'title' => 'VP, Engineering',
                'children' => [
                    ['name' => 'Sam Rivera', 'title' => 'Eng Manager'],
                    ['name' => 'Priya Nair', 'title' => 'Staff Engineer'],
                ],
            ],
            [
                'name' => 'Morgan Diaz',
                'title' => 'VP, Product',
                'children' => [
                    ['name' => 'Chris Park', 'title' => 'Product Manager'],
                ],
            ],
            [
                'name' => 'Riley Chen',
                'title' => 'VP, Operations',
                'children' => [
                    ['name' => 'Dana Cole', 'title' => 'Ops Lead'],
                    ['name' => 'Noah Kim', 'title' => 'Finance Lead'],
                ],
            ],
        ],
    ];
@endphp

<x-ui.org-chart :root="$org" />

With Avatars

Avery Quinn Chief Executive Officer
- Jordan Lee VP, Engineering
  - Sam Rivera Eng Manager
  - Priya Nair Staff Engineer
- Morgan Diaz VP, Design
  - Chris Park Design Lead

@php
    $org = [
        'name' => 'Avery Quinn',
        'title' => 'Chief Executive Officer',
        'avatar' => 'https://picsum.photos/seed/avery/96/96',
        'children' => [
            [
                'name' => 'Jordan Lee',
                'title' => 'VP, Engineering',
                'avatar' => 'https://picsum.photos/seed/jordan/96/96',
                'children' => [
                    ['name' => 'Sam Rivera', 'title' => 'Eng Manager', 'avatar' => 'https://picsum.photos/seed/sam/96/96'],
                    ['name' => 'Priya Nair', 'title' => 'Staff Engineer', 'avatar' => 'https://picsum.photos/seed/priya/96/96'],
                ],
            ],
            [
                'name' => 'Morgan Diaz',
                'title' => 'VP, Design',
                'avatar' => 'https://picsum.photos/seed/morgan/96/96',
                'children' => [
                    ['name' => 'Chris Park', 'title' => 'Design Lead', 'avatar' => 'https://picsum.photos/seed/chris/96/96'],
                ],
            ],
        ],
    ];
@endphp

<x-ui.org-chart :data="$org" />