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" />

API Reference

Props, slots and exposed methods for <x-ui.org-chart>.

Props

Prop	Type	Default	Description
`root`*	`array`	`[]`	The single root node of the hierarchy. Children nest recursively to any depth, each drawn as a centered card joined by connector lines. See Each node below.
`data`	`array`	—	Alias for root. When both are set and non-empty, data wins. See Each node below.

* Required.

Each node

Prop	Type	Default	Description
`name`*	`string`	—	Person or unit name shown on the card. Its first two words seed the initials fallback when no avatar is given.
`title`	`string`	—	Optional role or subtitle shown under the name.
`avatar`	`string`	—	Optional avatar image URL. Falls back to the name initials when omitted.
`children`	`array`	—	Optional list of child nodes (same shape), laid out in a row beneath this card. See Each node below.