Logo
Neura UI
Loading…

Neura UI

Composable Laravel UI
Blocks

Application

Shells, dashboards, lists, boards, billing and settings for signed-in product UI.
All categories
Activity feed activity-feed
Chronological workspace events. 
{{--
    Activity feed — chronological workspace events for dashboards.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="5xl" class="py-12 lg:py-16">
        <div class="flex items-end justify-between gap-4">
            <div>
                <neura::heading level="h2" size="xl" class="tracking-tight">
                    {{ __('Recent activity') }}
                </neura::heading>
                <neura::text size="sm" class="mt-1 text-fg-secondary">
                    {{ __('Deploys, invites and configuration changes across Atlas.') }}
                </neura::text>
            </div>
            <neura::button variant="ghost" size="sm">{{ __('View all') }}</neura::button>
        </div>

        <ul class="mt-8 divide-y divide-dashed divide-edge rounded-2xl border border-dashed border-edge">
            @foreach ([
                ['name' => 'Lina Ortega', 'action' => __('deployed'), 'target' => 'v2.4.1', 'time' => __('8m ago'), 'icon' => 'rocket-launch'],
                ['name' => 'Marc Dubois', 'action' => __('invited'), 'target' => 'sara@northline.io', 'time' => __('1h ago'), 'icon' => 'user-plus'],
                ['name' => 'System', 'action' => __('rotated'), 'target' => __('API keys'), 'time' => __('3h ago'), 'icon' => 'key'],
                ['name' => 'Amira Benali', 'action' => __('updated'), 'target' => __('billing plan'), 'time' => __('Yesterday'), 'icon' => 'credit-card'],
            ] as $event)
                <li class="flex items-start gap-4 px-5 py-4">
                    <div class="mt-0.5 grid size-9 shrink-0 place-items-center rounded-lg border border-dashed border-edge bg-surface-inset">
                        <neura::icon :name="$event['icon']" class="size-4 text-fg-secondary" />
                    </div>
                    <div class="min-w-0 flex-1">
                        <neura::text size="sm" class="text-fg">
                            <span class="font-medium">{{ $event['name'] }}</span>
                            <span class="text-fg-secondary"> {{ $event['action'] }} </span>
                            <span class="font-medium">{{ $event['target'] }}</span>
                        </neura::text>
                        <neura::text size="xs" class="mt-1 font-mono text-fg-muted">{{ $event['time'] }}</neura::text>
                    </div>
                </li>
            @endforeach
        </ul>
    </neura::container>
</section>
App shell sidebar app-shell-sidebar
Sidebar navigation with main content. 
{{--
    App shell sidebar — mini layout with left nav, header and content cards.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-10 lg:py-12">
        <div class="flex h-[560px] overflow-hidden rounded-2xl border border-dashed border-edge">
            <aside class="flex w-56 shrink-0 flex-col border-r border-dashed border-edge bg-surface-inset/30">
                <div class="flex items-center gap-2.5 border-b border-dashed border-edge px-4 py-4">
                    <span class="grid size-8 place-items-center rounded-lg border border-dashed border-edge bg-surface">
                        <neura::icon name="squares-2x2" class="size-4 text-fg" />
                    </span>
                    <neura::text size="sm" class="font-semibold tracking-tight text-fg">{{ __('Atlas') }}</neura::text>
                </div>

                <nav class="flex-1 space-y-0.5 p-3">
                    @foreach ([
                        ['label' => __('Overview'), 'icon' => 'home', 'active' => true],
                        ['label' => __('Projects'), 'icon' => 'folder', 'active' => false],
                        ['label' => __('Team'), 'icon' => 'users', 'active' => false],
                        ['label' => __('Billing'), 'icon' => 'credit-card', 'active' => false],
                        ['label' => __('Settings'), 'icon' => 'cog-6-tooth', 'active' => false],
                    ] as $item)
                        <a href="#"
                            @class([
                                'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-colors',
                                'bg-surface font-medium text-fg shadow-sm' => $item['active'],
                                'text-fg-secondary hover:bg-surface/60 hover:text-fg' => ! $item['active'],
                            ])>
                            <neura::icon :name="$item['icon']" class="size-4 shrink-0" />
                            {{ $item['label'] }}
                        </a>
                    @endforeach
                </nav>

                <div class="mt-auto flex items-center gap-3 border-t border-dashed border-edge px-4 py-3">
                    <neura::avatar name="Amira Benali" color="auto" size="sm" />
                    <div class="min-w-0 flex-1">
                        <neura::text size="xs" class="truncate font-medium text-fg">Amira Benali</neura::text>
                        <neura::text size="xs" class="truncate text-fg-muted">{{ __('Owner') }}</neura::text>
                    </div>
                </div>
            </aside>

            <div class="flex min-w-0 flex-1 flex-col">
                <header class="flex items-center justify-between gap-4 border-b border-dashed border-edge px-5 py-3">
                    <div>
                        <neura::heading level="h2" size="lg" class="tracking-tight">{{ __('Overview') }}</neura::heading>
                        <neura::text size="xs" class="mt-0.5 text-fg-muted">{{ __('Workspace health at a glance.') }}</neura::text>
                    </div>
                    <neura::button variant="primary" size="sm" icon="plus">{{ __('New project') }}</neura::button>
                </header>

                <div class="grid flex-1 gap-4 overflow-auto p-5 sm:grid-cols-2">
                    @foreach ([
                        ['title' => __('Active deploys'), 'body' => __('3 environments healthy in eu-west-1.'), 'icon' => 'rocket-launch'],
                        ['title' => __('Open issues'), 'body' => __('12 tickets awaiting triage this week.'), 'icon' => 'ticket'],
                        ['title' => __('Team capacity'), 'body' => __('7 of 10 seats in use.'), 'icon' => 'users'],
                        ['title' => __('Usage'), 'body' => __('82k of 100k API calls this month.'), 'icon' => 'chart-bar'],
                    ] as $card)
                        <div class="rounded-xl border border-dashed border-edge p-4">
                            <div class="mb-3 grid size-9 place-items-center rounded-lg border border-dashed border-edge bg-surface-inset">
                                <neura::icon :name="$card['icon']" class="size-4 text-fg-secondary" />
                            </div>
                            <neura::text size="sm" class="font-medium text-fg">{{ $card['title'] }}</neura::text>
                            <neura::text size="xs" class="mt-1 text-fg-secondary">{{ $card['body'] }}</neura::text>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </neura::container>
</section>
App shell topnav app-shell-topnav
Top navigation chrome with content area. 
{{--
    App shell topnav — top chrome with brand, links, search and content area.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-10 lg:py-12">
        <div class="overflow-hidden rounded-2xl border border-dashed border-edge">
            <header class="flex flex-wrap items-center gap-4 border-b border-dashed border-edge px-5 py-3">
                <div class="flex items-center gap-2.5">
                    <span class="grid size-8 place-items-center rounded-lg border border-dashed border-edge bg-surface-inset">
                        <neura::icon name="squares-2x2" class="size-4 text-fg" />
                    </span>
                    <neura::text size="sm" class="font-semibold tracking-tight text-fg">{{ __('Atlas') }}</neura::text>
                </div>

                <nav class="flex flex-wrap items-center gap-1">
                    @foreach ([
                        ['label' => __('Dashboard'), 'active' => true],
                        ['label' => __('Projects'), 'active' => false],
                        ['label' => __('Reports'), 'active' => false],
                        ['label' => __('Docs'), 'active' => false],
                    ] as $link)
                        <a href="#"
                            @class([
                                'rounded-lg px-3 py-1.5 text-sm transition-colors',
                                'bg-surface-inset font-medium text-fg' => $link['active'],
                                'text-fg-secondary hover:text-fg' => ! $link['active'],
                            ])>
                            {{ $link['label'] }}
                        </a>
                    @endforeach
                </nav>

                <div class="ml-auto flex items-center gap-3">
                    <div class="hidden w-48 sm:block">
                        <neura::input type="search" placeholder="{{ __('Search…') }}" prefixIcon="magnifying-glass" size="sm" />
                    </div>
                    <neura::button variant="ghost" size="sm" icon="bell" />
                    <neura::avatar name="Jonas Keller" color="auto" size="sm" />
                </div>
            </header>

            <div class="space-y-4 bg-surface-inset/20 p-5">
                <div class="flex flex-wrap items-end justify-between gap-3">
                    <div>
                        <neura::heading level="h2" size="xl" class="tracking-tight">{{ __('Dashboard') }}</neura::heading>
                        <neura::text size="sm" class="mt-1 text-fg-secondary">{{ __('Ship status across your production workspaces.') }}</neura::text>
                    </div>
                    <neura::button variant="primary" size="sm" icon="plus">{{ __('Create') }}</neura::button>
                </div>

                <div class="grid gap-4 sm:grid-cols-3">
                    @foreach ([
                        ['label' => __('Deployments'), 'value' => '128', 'meta' => __('This month')],
                        ['label' => __('Uptime'), 'value' => '99.98%', 'meta' => __('Last 30 days')],
                        ['label' => __('Incidents'), 'value' => '2', 'meta' => __('Resolved')],
                    ] as $stat)
                        <div class="rounded-xl border border-dashed border-edge bg-surface p-4">
                            <neura::text size="xs" class="font-mono uppercase tracking-[0.14em] text-fg-muted">{{ $stat['label'] }}</neura::text>
                            <p class="mt-2 text-2xl font-semibold tabular-nums tracking-tight text-fg">{{ $stat['value'] }}</p>
                            <neura::text size="xs" class="mt-1 text-fg-secondary">{{ $stat['meta'] }}</neura::text>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </neura::container>
</section>
Billing summary billing-summary
Plan, usage meters and invoice. 
{{--
    Billing summary — plan card, usage meters and invoice row.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="5xl" class="py-12 lg:py-16">
        <neura::heading level="h2" size="xl" class="tracking-tight">{{ __('Billing') }}</neura::heading>
        <neura::text size="sm" class="mt-1 text-fg-secondary">{{ __('Plan, usage and the latest invoice.') }}</neura::text>

        <div class="mt-8 grid gap-4 lg:grid-cols-2">
            <div class="rounded-2xl border border-dashed border-edge p-6">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <neura::text size="xs" class="font-mono uppercase tracking-[0.14em] text-fg-muted">{{ __('Current plan') }}</neura::text>
                        <neura::heading level="h3" size="xl" class="mt-2 tracking-tight">{{ __('Studio') }}</neura::heading>
                    </div>
                    <neura::badge variant="soft" color="success" pill>{{ __('Active') }}</neura::badge>
                </div>
                <neura::text size="sm" class="mt-3 text-fg-secondary">€49 {{ __('per month') }} · {{ __('Renews Apr 1') }}</neura::text>
                <div class="mt-6 flex flex-wrap gap-2">
                    <neura::button variant="primary" size="sm">{{ __('Upgrade') }}</neura::button>
                    <neura::button variant="outline" size="sm">{{ __('Manage seats') }}</neura::button>
                </div>
            </div>

            <div class="rounded-2xl border border-dashed border-edge p-6">
                <neura::text size="xs" class="font-mono uppercase tracking-[0.14em] text-fg-muted">{{ __('Usage') }}</neura::text>
                <div class="mt-4 space-y-4">
                    @foreach ([
                        ['label' => __('Seats'), 'used' => '7 / 10', 'pct' => 70],
                        ['label' => __('Storage'), 'used' => '12 / 50 GB', 'pct' => 24],
                        ['label' => __('API calls'), 'used' => '82k / 100k', 'pct' => 82],
                    ] as $meter)
                        <div>
                            <div class="mb-1.5 flex justify-between gap-2 text-xs">
                                <span class="text-fg-secondary">{{ $meter['label'] }}</span>
                                <span class="font-mono tabular-nums text-fg-muted">{{ $meter['used'] }}</span>
                            </div>
                            <div class="h-1.5 overflow-hidden rounded-full bg-surface-inset">
                                <div class="h-full rounded-full bg-fg/40" style="width: {{ $meter['pct'] }}%"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="mt-4 flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-dashed border-edge px-5 py-4">
            <div>
                <neura::text size="sm" class="font-medium text-fg">{{ __('Invoice') }} · INV-2041</neura::text>
                <neura::text size="xs" class="mt-1 font-mono text-fg-muted">Mar 1, 2026 · €49.00</neura::text>
            </div>
            <neura::button variant="soft" size="sm" icon="arrow-down-tray">{{ __('Download PDF') }}</neura::button>
        </div>
    </neura::container>
</section>
Metric card card-metric
Featured metric with sparkline bars. 
{{--
    Card metric — featured KPI with sparkline-style bars.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="md" class="py-12 lg:py-16">
        <div class="rounded-2xl border border-dashed border-edge p-6 sm:p-8">
            <div class="flex flex-wrap items-start justify-between gap-3">
                <div>
                    <neura::text size="xs" class="font-mono uppercase tracking-[0.14em] text-fg-muted">{{ __('Weekly active users') }}</neura::text>
                    <div class="mt-2 flex items-end gap-3">
                        <span class="text-4xl font-semibold tabular-nums tracking-tight text-fg">12,904</span>
                        <span class="mb-1 inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-0.5 font-mono text-[11px] text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400">
                            <neura::icon name="arrow-trending-up" class="size-3.5" />
                            +3.1%
                        </span>
                    </div>
                    <neura::text size="sm" class="mt-2 text-fg-secondary">{{ __('Compared to the previous 7 days.') }}</neura::text>
                </div>
                <neura::button variant="ghost" size="sm" icon="ellipsis-horizontal" />
            </div>

            <div class="mt-8 flex h-24 items-end gap-1.5">
                @foreach ([42, 48, 45, 55, 52, 60, 58, 64, 62, 70, 68, 74, 72, 80] as $bar)
                    <span class="flex-1 rounded-sm bg-fg/20 dark:bg-fg/30" style="height: {{ $bar }}%"></span>
                @endforeach
            </div>

            <div class="mt-3 flex justify-between font-mono text-[10px] uppercase tracking-[0.14em] text-fg-muted">
                <span>{{ __('Mon') }}</span>
                <span>{{ __('Today') }}</span>
            </div>
        </div>
    </neura::container>
</section>
Project cards card-project
Project grid with progress. 
{{--
    Card project — three project cards with status and progress meters.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-12 lg:py-16">
        <div class="mb-8 flex flex-wrap items-end justify-between gap-4">
            <div>
                <neura::heading level="h2" size="xl" class="tracking-tight">{{ __('Projects') }}</neura::heading>
                <neura::text size="sm" class="mt-1 text-fg-secondary">{{ __('Active workstreams in this workspace.') }}</neura::text>
            </div>
            <neura::button variant="primary" size="sm" icon="plus">{{ __('New project') }}</neura::button>
        </div>

        <div class="grid gap-4 lg:grid-cols-3">
            @foreach ([
                [
                    'name' => __('Atlas redesign'),
                    'meta' => __('Design · Due Apr 22'),
                    'status' => __('On track'),
                    'color' => 'success',
                    'pct' => 72,
                    'members' => ['AB', 'JK', 'SR'],
                ],
                [
                    'name' => __('Billing v3'),
                    'meta' => __('Platform · Due May 4'),
                    'status' => __('At risk'),
                    'color' => 'warning',
                    'pct' => 41,
                    'members' => ['CL', 'LO'],
                ],
                [
                    'name' => __('Docs refresh'),
                    'meta' => __('Content · Due Apr 10'),
                    'status' => __('On track'),
                    'color' => 'success',
                    'pct' => 88,
                    'members' => ['AB', 'SR', 'MD', 'JK'],
                ],
            ] as $project)
                <div class="rounded-2xl border border-dashed border-edge p-5">
                    <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0">
                            <neura::text size="sm" class="font-medium text-fg">{{ $project['name'] }}</neura::text>
                            <neura::text size="xs" class="mt-1 text-fg-muted">{{ $project['meta'] }}</neura::text>
                        </div>
                        <neura::badge variant="soft" :color="$project['color']" pill>{{ $project['status'] }}</neura::badge>
                    </div>

                    <div class="mt-5">
                        <div class="mb-1.5 flex justify-between text-xs">
                            <span class="text-fg-secondary">{{ __('Progress') }}</span>
                            <span class="font-mono tabular-nums text-fg-muted">{{ $project['pct'] }}%</span>
                        </div>
                        <div class="h-1.5 overflow-hidden rounded-full bg-surface-inset">
                            <div class="h-full rounded-full bg-fg/40" style="width: {{ $project['pct'] }}%"></div>
                        </div>
                    </div>

                    <div class="mt-5 flex items-center justify-between">
                        <div class="flex -space-x-2">
                            @foreach ($project['members'] as $initials)
                                <neura::avatar :initials="$initials" size="xs" color="auto" class="ring-2 ring-surface" />
                            @endforeach
                        </div>
                        <neura::button variant="ghost" size="sm" icon="arrow-right" />
                    </div>
                </div>
            @endforeach
        </div>
    </neura::container>
</section>
Chart panel chart-panel
Revenue analytics with period tabs. 
{{--
    Chart panel — analytics card with period tabs and native bars.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-12 lg:py-16">
        <div class="rounded-2xl border border-dashed border-edge">
            <div class="flex flex-wrap items-center justify-between gap-4 border-b border-dashed border-edge px-5 py-4">
                <div>
                    <neura::heading level="h2" size="lg" class="tracking-tight">{{ __('Revenue') }}</neura::heading>
                    <neura::text size="xs" class="mt-1 font-mono text-fg-muted">{{ __('Last 12 weeks') }}</neura::text>
                </div>
                <div class="flex items-center gap-1 rounded-full border border-dashed border-edge p-0.5">
                    @foreach ([__('7d'), __('30d'), __('90d')] as $i => $period)
                        <button type="button"
                            @class([
                                'rounded-full px-3 py-1 text-xs font-medium transition-colors',
                                'bg-fg text-fg-on-emphasis' => $i === 1,
                                'text-fg-muted hover:text-fg' => $i !== 1,
                            ])>
                            {{ $period }}
                        </button>
                    @endforeach
                </div>
            </div>

            <div class="grid gap-6 p-5 lg:grid-cols-12">
                <div class="lg:col-span-3 space-y-4">
                    @foreach ([
                        ['label' => __('MRR'), 'value' => '€48.2k', 'delta' => '+12%', 'spark' => [32, 36, 34, 40, 42, 45, 48]],
                        ['label' => __('ARR'), 'value' => '€578k', 'delta' => '+9%', 'spark' => [480, 500, 520, 540, 555, 568, 578]],
                        ['label' => __('ARPU'), 'value' => '€84', 'delta' => '+2%', 'spark' => [78, 79, 80, 81, 82, 83, 84]],
                    ] as $stat)
                        <div class="rounded-xl border border-dashed border-edge p-4">
                            <div class="flex items-start justify-between gap-3">
                                <div>
                                    <neura::text size="xs" class="font-mono uppercase tracking-[0.14em] text-fg-muted">{{ $stat['label'] }}</neura::text>
                                    <div class="mt-2 flex items-end gap-2">
                                        <span class="text-xl font-semibold tabular-nums text-fg">{{ $stat['value'] }}</span>
                                        <span class="font-mono text-[11px] text-emerald-600 dark:text-emerald-400">{{ $stat['delta'] }}</span>
                                    </div>
                                </div>
                                <neura::sparkline :data="$stat['spark']" color="success" :width="64" :height="24" />
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="lg:col-span-9 rounded-xl border border-dashed border-edge bg-surface-inset/40 p-4">
                    <neura::bars
                        height="12rem"
                        color="fg"
                        variant="soft"
                        gap="sm"
                        :data="[40, 52, 48, 65, 58, 72, 70, 78, 74, 86, 82, 94]"
                    />
                </div>
            </div>
        </div>
    </neura::container>
</section>
Dashboard overview dashboard-overview
Greeting, stats and recent table. 
{{--
    Dashboard overview — greeting, four stats and a recent table snippet.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-12 lg:py-16">
        <div class="flex flex-wrap items-end justify-between gap-4">
            <div>
                <neura::heading level="h2" size="2xl" class="tracking-tight">
                    {{ __('Good evening, Amira') }}
                </neura::heading>
                <neura::text size="sm" class="mt-1 text-fg-secondary">
                    {{ __('Here is what changed in Atlas since yesterday.') }}
                </neura::text>
            </div>
            <div class="flex flex-wrap gap-2">
                <neura::button variant="outline" size="sm" icon="arrow-down-tray">{{ __('Export') }}</neura::button>
                <neura::button variant="primary" size="sm" icon="plus">{{ __('New report') }}</neura::button>
            </div>
        </div>

        <dl class="mt-8 grid grid-cols-2 gap-px overflow-hidden rounded-2xl border border-dashed border-edge bg-edge lg:grid-cols-4">
            @foreach ([
                ['label' => __('Revenue'), 'value' => '€48.2k', 'delta' => '+12%', 'up' => true],
                ['label' => __('Sign-ups'), 'value' => '1,284', 'delta' => '+6%', 'up' => true],
                ['label' => __('Churn'), 'value' => '1.8%', 'delta' => '-0.3%', 'up' => true],
                ['label' => __('Support'), 'value' => '34', 'delta' => '+4', 'up' => false],
            ] as $stat)
                <div class="bg-surface px-5 py-5">
                    <dt class="font-mono text-[11px] uppercase tracking-[0.14em] text-fg-muted">{{ $stat['label'] }}</dt>
                    <dd class="mt-2 flex items-end justify-between gap-2">
                        <span class="text-2xl font-semibold tabular-nums tracking-tight text-fg">{{ $stat['value'] }}</span>
                        <span @class([
                            'font-mono text-[11px]',
                            'text-emerald-600 dark:text-emerald-400' => $stat['up'],
                            'text-red-600 dark:text-red-400' => ! $stat['up'],
                        ])>{{ $stat['delta'] }}</span>
                    </dd>
                </div>
            @endforeach
        </dl>

        <div class="mt-6 overflow-hidden rounded-2xl border border-dashed border-edge">
            <div class="flex items-center justify-between gap-3 border-b border-dashed border-edge px-5 py-3">
                <neura::heading level="h3" size="md" class="tracking-tight">{{ __('Recent deployments') }}</neura::heading>
                <neura::button variant="ghost" size="sm">{{ __('View all') }}</neura::button>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full min-w-[520px] text-left text-sm">
                    <thead>
                        <tr class="border-b border-dashed border-edge text-[11px] font-mono uppercase tracking-[0.14em] text-fg-muted">
                            <th class="px-5 py-3 font-normal">{{ __('Release') }}</th>
                            <th class="px-5 py-3 font-normal">{{ __('Environment') }}</th>
                            <th class="px-5 py-3 font-normal">{{ __('Status') }}</th>
                            <th class="px-5 py-3 font-normal">{{ __('When') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-dashed divide-edge">
                        @foreach ([
                            ['release' => 'v2.4.1', 'env' => __('Production'), 'status' => __('Live'), 'color' => 'success', 'when' => __('8m ago')],
                            ['release' => 'v2.4.0', 'env' => __('Staging'), 'status' => __('Live'), 'color' => 'success', 'when' => __('2h ago')],
                            ['release' => 'v2.3.9', 'env' => __('Production'), 'status' => __('Rolled back'), 'color' => 'warning', 'when' => __('Yesterday')],
                        ] as $row)
                            <tr>
                                <td class="px-5 py-3 font-medium text-fg">{{ $row['release'] }}</td>
                                <td class="px-5 py-3 text-fg-secondary">{{ $row['env'] }}</td>
                                <td class="px-5 py-3">
                                    <neura::badge variant="soft" :color="$row['color']" pill>{{ $row['status'] }}</neura::badge>
                                </td>
                                <td class="px-5 py-3 font-mono text-xs text-fg-muted">{{ $row['when'] }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </neura::container>
</section>
Confirm dialog dialog-confirm
Centered destructive confirmation chrome. 
{{--
    Dialog confirm — centered danger confirmation chrome for destructive actions.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-12 lg:py-16">
        <div class="relative flex min-h-[320px] items-center justify-center overflow-hidden rounded-2xl border border-dashed border-edge bg-surface-inset/40">
            <div class="absolute inset-0 neura-dots opacity-40"></div>

            <div class="relative z-10 w-full max-w-md rounded-2xl border border-dashed border-edge bg-surface p-6 shadow-lg sm:p-7">
                <div class="mx-auto mb-4 grid size-11 place-items-center rounded-full border border-dashed border-red-300 bg-red-50 text-red-700 dark:border-red-500/40 dark:bg-red-500/10 dark:text-red-400">
                    <neura::icon name="exclamation-triangle" class="size-5" />
                </div>

                <neura::heading level="h2" size="lg" class="text-center tracking-tight">
                    {{ __('Delete project?') }}
                </neura::heading>
                <neura::text size="sm" class="mt-2 text-center text-fg-secondary">
                    {{ __('This permanently removes Atlas and all of its deploys, environments and invite history. This cannot be undone.') }}
                </neura::text>

                <div class="mt-5 rounded-xl border border-dashed border-edge bg-surface-inset/40 px-4 py-3">
                    <neura::text size="xs" class="font-mono uppercase tracking-[0.14em] text-fg-muted">{{ __('Project') }}</neura::text>
                    <neura::text size="sm" class="mt-1 font-medium text-fg">Atlas · eu-west-1</neura::text>
                </div>

                <div class="mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
                    <neura::button variant="ghost" class="sm:flex-1 sm:flex-none">{{ __('Cancel') }}</neura::button>
                    <neura::button variant="primary" color="danger" class="sm:flex-1 sm:flex-none">{{ __('Delete project') }}</neura::button>
                </div>
            </div>
        </div>
    </neura::container>
</section>
Empty panel empty-panel
Empty state with primary actions. 
{{--
    Empty panel — application empty state with primary action.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-12 lg:py-16">
        <div class="rounded-2xl border border-dashed border-edge">
            <neura::empty-state
                icon="inbox"
                :title="__('No projects yet')"
                :description="__('Create your first project to invite teammates and start shipping.')"
                size="lg"
            >
                <x-slot:actions>
                    <neura::button variant="primary" icon="plus">
                        {{ __('New project') }}
                    </neura::button>
                    <neura::button variant="soft">
                        {{ __('Import from Git') }}
                    </neura::button>
                </x-slot:actions>
            </neura::empty-state>
        </div>
    </neura::container>
</section>
Filter toolbar filter-toolbar
Search, chips and sort controls. 
{{--
    Filter toolbar — search, chips and view toggles for data screens.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-10 lg:py-12">
        <div class="rounded-2xl border border-dashed border-edge p-4 sm:p-5">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                <div class="relative flex max-w-md flex-1 items-center gap-2">
                    <neura::icon name="magnifying-glass" class="size-4 shrink-0 text-fg-muted" />
                    <input type="search" placeholder="{{ __('Search customers…') }}"
                        class="w-full border-none bg-transparent p-0 text-sm text-fg outline-none ring-0 placeholder:text-fg-muted focus:outline-none focus:ring-0" />
                </div>

                <div class="flex flex-wrap items-center gap-2">
                    @foreach ([
                        ['label' => __('Status'), 'value' => __('Active')],
                        ['label' => __('Plan'), 'value' => __('Studio')],
                        ['label' => __('Region'), 'value' => 'EU'],
                    ] as $chip)
                        <button type="button"
                            class="inline-flex items-center gap-1.5 rounded-full border border-dashed border-edge px-3 py-1.5 text-xs text-fg-secondary transition-colors hover:bg-hover hover:text-fg">
                            <span class="text-fg-muted">{{ $chip['label'] }}:</span>
                            <span class="font-medium text-fg">{{ $chip['value'] }}</span>
                            <neura::icon name="x-mark" class="size-3.5 text-fg-muted" />
                        </button>
                    @endforeach
                    <neura::button variant="outline" size="sm" icon="funnel">{{ __('Filter') }}</neura::button>
                    <neura::button variant="soft" size="sm" icon="arrows-up-down">{{ __('Sort') }}</neura::button>
                </div>
            </div>
        </div>
    </neura::container>
</section>
Simple Gantt gantt-simple
Labeled bars across months. 
{{--
    Gantt simple — labeled bars across months for a lightweight roadmap.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-12 lg:py-16">
        <div class="mb-6 flex flex-wrap items-end justify-between gap-4">
            <div>
                <neura::heading level="h2" size="xl" class="tracking-tight">{{ __('Roadmap') }}</neura::heading>
                <neura::text size="sm" class="mt-1 text-fg-secondary">{{ __('Q2 initiatives across product and platform.') }}</neura::text>
            </div>
            <neura::badge variant="soft" pill>{{ __('2026') }}</neura::badge>
        </div>

        <div class="overflow-x-auto rounded-2xl border border-dashed border-edge">
            <div class="min-w-[640px]">
                <div class="grid grid-cols-[160px_1fr] border-b border-dashed border-edge bg-surface-inset/40">
                    <div class="px-4 py-3 font-mono text-[10px] uppercase tracking-[0.14em] text-fg-muted">{{ __('Initiative') }}</div>
                    <div class="grid grid-cols-4 border-l border-dashed border-edge">
                        @foreach ([__('Apr'), __('May'), __('Jun'), __('Jul')] as $month)
                            <div class="border-l border-dashed border-edge px-3 py-3 text-center font-mono text-[10px] uppercase tracking-[0.14em] text-fg-muted first:border-l-0">
                                {{ $month }}
                            </div>
                        @endforeach
                    </div>
                </div>

                @foreach ([
                    ['name' => __('Design system'), 'start' => 1, 'span' => 2, 'tone' => 'bg-fg/25'],
                    ['name' => __('Billing v3'), 'start' => 2, 'span' => 2, 'tone' => 'bg-fg/40'],
                    ['name' => __('Mobile app'), 'start' => 1, 'span' => 3, 'tone' => 'bg-fg/20'],
                    ['name' => __('Analytics'), 'start' => 3, 'span' => 2, 'tone' => 'bg-fg/35'],
                    ['name' => __('Partner API'), 'start' => 2, 'span' => 3, 'tone' => 'bg-fg/30'],
                ] as $row)
                    <div class="grid grid-cols-[160px_1fr] border-b border-dashed border-edge last:border-b-0">
                        <div class="flex items-center px-4 py-4">
                            <neura::text size="sm" class="font-medium text-fg">{{ $row['name'] }}</neura::text>
                        </div>
                        <div class="relative grid grid-cols-4 items-center border-l border-dashed border-edge py-3">
                            @for ($i = 0; $i < 4; $i++)
                                <div class="h-full border-l border-dashed border-edge first:border-l-0"></div>
                            @endfor
                            <div
                                @class(['absolute inset-y-0 my-auto h-7 rounded-md mx-1.5', $row['tone']])
                                style="left: calc(({{ $row['start'] - 1 }} / 4) * 100%); width: calc(({{ $row['span'] }} / 4) * 100% - 12px);">
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </neura::container>
</section>
Kanban board kanban-board
Three-column sprint board. 
{{--
    Kanban board — three-column task board for project surfaces.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-12 lg:py-16">
        <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
            <neura::heading level="h2" size="xl" class="tracking-tight">{{ __('Sprint board') }}</neura::heading>
            <neura::button variant="primary" size="sm" icon="plus">{{ __('Add card') }}</neura::button>
        </div>

        <div class="grid gap-4 lg:grid-cols-3">
            @foreach ([
                [
                    'title' => __('Todo'),
                    'count' => 3,
                    'cards' => [
                        ['title' => __('Auth rate limits'), 'tag' => __('Security'), 'assignee' => 'AB'],
                        ['title' => __('Export CSV'), 'tag' => __('Billing'), 'assignee' => 'JK'],
                        ['title' => __('Empty states'), 'tag' => __('UI'), 'assignee' => 'SR'],
                    ],
                ],
                [
                    'title' => __('In progress'),
                    'count' => 2,
                    'cards' => [
                        ['title' => __('Editor pagination'), 'tag' => __('Core'), 'assignee' => 'CL'],
                        ['title' => __('Block gallery'), 'tag' => __('Docs'), 'assignee' => 'LO'],
                    ],
                ],
                [
                    'title' => __('Done'),
                    'count' => 2,
                    'cards' => [
                        ['title' => __('Token audit'), 'tag' => __('Design'), 'assignee' => 'AB'],
                        ['title' => __('Flow edges'), 'tag' => __('Core'), 'assignee' => 'JK'],
                    ],
                ],
            ] as $column)
                <div class="rounded-2xl border border-dashed border-edge bg-surface-inset/30 p-3">
                    <div class="mb-3 flex items-center justify-between px-1">
                        <neura::text size="sm" class="font-medium text-fg">{{ $column['title'] }}</neura::text>
                        <span class="font-mono text-[11px] tabular-nums text-fg-muted">{{ $column['count'] }}</span>
                    </div>
                    <ul class="space-y-2">
                        @foreach ($column['cards'] as $card)
                            <li class="rounded-xl border border-dashed border-edge bg-surface p-3 shadow-sm">
                                <neura::text size="sm" class="font-medium text-fg">{{ $card['title'] }}</neura::text>
                                <div class="mt-3 flex items-center justify-between gap-2">
                                    <neura::badge variant="soft" pill>{{ $card['tag'] }}</neura::badge>
                                    <neura::avatar :initials="$card['assignee']" size="xs" color="auto" />
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endforeach
        </div>
    </neura::container>
</section>
Dense list list-dense
Compact rows with icon, meta and badge. 
{{--
    Dense list — compact rows with icon, title, meta and trailing badge.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="5xl" class="py-12 lg:py-16">
        <div class="flex flex-wrap items-end justify-between gap-4">
            <div>
                <neura::heading level="h2" size="xl" class="tracking-tight">{{ __('Integrations') }}</neura::heading>
                <neura::text size="sm" class="mt-1 text-fg-secondary">{{ __('Connected services available to this workspace.') }}</neura::text>
            </div>
            <neura::button variant="outline" size="sm" icon="plus">{{ __('Add') }}</neura::button>
        </div>

        <ul class="mt-8 overflow-hidden rounded-2xl border border-dashed border-edge">
            @foreach ([
                ['title' => __('GitHub'), 'meta' => __('Repos · 12 repositories'), 'icon' => 'code-bracket', 'badge' => __('Connected'), 'color' => 'success'],
                ['title' => __('Slack'), 'meta' => __('Alerts · #engineering'), 'icon' => 'chat-bubble-left-right', 'badge' => __('Connected'), 'color' => 'success'],
                ['title' => __('Stripe'), 'meta' => __('Billing · live mode'), 'icon' => 'credit-card', 'badge' => __('Connected'), 'color' => 'success'],
                ['title' => __('Linear'), 'meta' => __('Issues · sync paused'), 'icon' => 'queue-list', 'badge' => __('Paused'), 'color' => 'warning'],
                ['title' => __('Sentry'), 'meta' => __('Errors · not configured'), 'icon' => 'bug-ant', 'badge' => __('Setup'), 'color' => 'secondary'],
                ['title' => __('Vercel'), 'meta' => __('Deploys · preview hooks'), 'icon' => 'cloud', 'badge' => __('Connected'), 'color' => 'success'],
            ] as $item)
                <li class="flex items-center gap-3 border-b border-dashed border-edge px-4 py-2.5 last:border-b-0 sm:px-5">
                    <div class="grid size-8 shrink-0 place-items-center rounded-lg border border-dashed border-edge bg-surface-inset">
                        <neura::icon :name="$item['icon']" class="size-3.5 text-fg-secondary" />
                    </div>
                    <div class="min-w-0 flex-1">
                        <neura::text size="sm" class="font-medium text-fg">{{ $item['title'] }}</neura::text>
                        <neura::text size="xs" class="truncate text-fg-muted">{{ $item['meta'] }}</neura::text>
                    </div>
                    <neura::badge variant="soft" :color="$item['color']" pill>{{ $item['badge'] }}</neura::badge>
                </li>
            @endforeach
        </ul>
    </neura::container>
</section>
Notifications panel notifications-panel
Inbox-style alerts with unread state. 
{{--
    Notifications panel — inbox-style alerts for application shells.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="md" class="py-12 lg:py-16">
        <div class="overflow-hidden rounded-2xl border border-dashed border-edge">
            <div class="flex items-center justify-between gap-3 border-b border-dashed border-edge px-5 py-4">
                <neura::heading level="h2" size="lg" class="tracking-tight">
                    {{ __('Notifications') }}
                </neura::heading>
                <neura::button variant="ghost" size="sm">{{ __('Mark all read') }}</neura::button>
            </div>

            <ul class="divide-y divide-dashed divide-edge">
                @foreach ([
                    ['title' => __('Deploy finished'), 'body' => __('Atlas v2.4.1 is live in eu-west-1.'), 'time' => __('2m'), 'unread' => true],
                    ['title' => __('Seat request'), 'body' => __('Sara asked to join the Design workspace.'), 'time' => __('40m'), 'unread' => true],
                    ['title' => __('Invoice paid'), 'body' => __('Studio plan · March billing cycle.'), 'time' => __('1d'), 'unread' => false],
                    ['title' => __('Security alert'), 'body' => __('New sign-in from Frankfurt.'), 'time' => __('2d'), 'unread' => false],
                ] as $note)
                    <li @class([
                        'flex gap-3 px-5 py-4',
                        'bg-surface-inset/50' => $note['unread'],
                    ])>
                        <span @class([
                            'mt-1.5 size-2 shrink-0 rounded-full',
                            'bg-primary-500' => $note['unread'],
                            'bg-transparent' => ! $note['unread'],
                        ])></span>
                        <div class="min-w-0 flex-1">
                            <div class="flex items-start justify-between gap-3">
                                <neura::text size="sm" class="font-medium text-fg">{{ $note['title'] }}</neura::text>
                                <span class="shrink-0 font-mono text-[11px] text-fg-muted">{{ $note['time'] }}</span>
                            </div>
                            <neura::text size="sm" class="mt-1 text-fg-secondary">{{ $note['body'] }}</neura::text>
                        </div>
                    </li>
                @endforeach
            </ul>
        </div>
    </neura::container>
</section>
Onboarding steps onboarding-steps
Three-step checklist with progress. 
{{--
    Onboarding steps — three-step checklist with progress for new workspaces.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="5xl" class="py-12 lg:py-16">
        <div class="rounded-2xl border border-dashed border-edge p-6 sm:p-8">
            <div class="flex flex-wrap items-start justify-between gap-4">
                <div>
                    <neura::heading level="h2" size="xl" class="tracking-tight">{{ __('Finish setting up') }}</neura::heading>
                    <neura::text size="sm" class="mt-1 text-fg-secondary">{{ __('Two of three steps complete — you are almost ready.') }}</neura::text>
                </div>
                <neura::badge variant="soft" color="info" pill>{{ __('67% done') }}</neura::badge>
            </div>

            <div class="mt-5 h-1.5 overflow-hidden rounded-full bg-surface-inset">
                <div class="h-full w-2/3 rounded-full bg-fg/50"></div>
            </div>

            <ul class="mt-8 space-y-3">
                @foreach ([
                    ['title' => __('Create a workspace'), 'body' => __('Name your team and pick a region.'), 'done' => true, 'cta' => null],
                    ['title' => __('Invite teammates'), 'body' => __('Add at least one collaborator to share projects.'), 'done' => true, 'cta' => null],
                    ['title' => __('Connect a repository'), 'body' => __('Link GitHub or GitLab to enable deploys.'), 'done' => false, 'cta' => __('Connect')],
                ] as $step)
                    <li class="flex flex-wrap items-center gap-4 rounded-xl border border-dashed border-edge px-4 py-4">
                        <span @class([
                            'grid size-9 shrink-0 place-items-center rounded-full border border-dashed',
                            'border-emerald-300 bg-emerald-50 text-emerald-700 dark:border-emerald-500/40 dark:bg-emerald-500/10 dark:text-emerald-400' => $step['done'],
                            'border-edge bg-surface-inset text-fg-muted' => ! $step['done'],
                        ])>
                            <neura::icon :name="$step['done'] ? 'check' : 'ellipsis-horizontal'" class="size-4" />
                        </span>
                        <div class="min-w-0 flex-1">
                            <neura::text size="sm" class="font-medium text-fg">{{ $step['title'] }}</neura::text>
                            <neura::text size="xs" class="mt-0.5 text-fg-secondary">{{ $step['body'] }}</neura::text>
                        </div>
                        @if ($step['done'])
                            <neura::badge variant="soft" color="success" pill>{{ __('Done') }}</neura::badge>
                        @else
                            <neura::button variant="primary" size="sm">{{ $step['cta'] }}</neura::button>
                        @endif
                    </li>
                @endforeach
            </ul>
        </div>
    </neura::container>
</section>
Page header page-header-actions
Breadcrumbs, title, badge and actions. 
{{--
    Page header actions — title, meta and primary toolbar for app screens.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-8 lg:py-10">
        <div class="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
            <div class="min-w-0">
                <neura::breadcrumbs>
                    <neura::breadcrumbs.item href="#">{{ __('Workspace') }}</neura::breadcrumbs.item>
                    <neura::breadcrumbs.item href="#">{{ __('Projects') }}</neura::breadcrumbs.item>
                    <neura::breadcrumbs.item>{{ __('Atlas') }}</neura::breadcrumbs.item>
                </neura::breadcrumbs>

                <div class="mt-4 flex flex-wrap items-center gap-3">
                    <neura::heading level="h1" size="2xl" class="tracking-tight">
                        {{ __('Atlas') }}
                    </neura::heading>
                    <neura::badge variant="soft" color="success" pill>{{ __('Active') }}</neura::badge>
                </div>

                <neura::text size="sm" class="mt-2 text-fg-secondary">
                    {{ __('Production · eu-west-1 · Updated 12 minutes ago') }}
                </neura::text>
            </div>

            <div class="flex flex-wrap items-center gap-2">
                <neura::button variant="outline" icon="share">{{ __('Share') }}</neura::button>
                <neura::button variant="soft" icon="cog-6-tooth">{{ __('Settings') }}</neura::button>
                <neura::button variant="primary" icon="plus">{{ __('New deploy') }}</neura::button>
            </div>
        </div>
    </neura::container>
</section>
Profile header profile-header
Avatar, name, stats and edit action. 
{{--
    Profile header — cover band with avatar, identity, stats and edit action.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="5xl" class="py-12 lg:py-16">
        <div class="overflow-hidden rounded-2xl border border-dashed border-edge">
            <div class="h-28 border-b border-dashed border-edge bg-surface-inset neura-dots sm:h-32"></div>

            <div class="relative px-5 pb-6 pt-0 sm:px-8">
                <div class="-mt-10 flex flex-wrap items-end justify-between gap-4">
                    <div class="flex flex-wrap items-end gap-4">
                        <neura::avatar name="Amira Benali" color="auto" size="xl" class="ring-4 ring-surface" />
                        <div class="pb-1">
                            <div class="flex flex-wrap items-center gap-2">
                                <neura::heading level="h2" size="xl" class="tracking-tight">Amira Benali</neura::heading>
                                <neura::badge variant="soft" color="success" pill>{{ __('Online') }}</neura::badge>
                            </div>
                            <neura::text size="sm" class="mt-1 text-fg-secondary">{{ __('Product Lead · Northline') }}</neura::text>
                        </div>
                    </div>
                    <neura::button variant="outline" size="sm" icon="pencil-square">{{ __('Edit profile') }}</neura::button>
                </div>

                <dl class="mt-6 grid grid-cols-3 gap-px overflow-hidden rounded-xl border border-dashed border-edge bg-edge">
                    @foreach ([
                        ['label' => __('Projects'), 'value' => '18'],
                        ['label' => __('Followers'), 'value' => '240'],
                        ['label' => __('Following'), 'value' => '64'],
                    ] as $stat)
                        <div class="bg-surface px-4 py-3 text-center">
                            <dd class="text-lg font-semibold tabular-nums text-fg">{{ $stat['value'] }}</dd>
                            <dt class="mt-0.5 font-mono text-[10px] uppercase tracking-[0.14em] text-fg-muted">{{ $stat['label'] }}</dt>
                        </div>
                    @endforeach
                </dl>
            </div>
        </div>
    </neura::container>
</section>
Week schedule schedule-week
Week strip with scheduled events. 
{{--
    Schedule week — simple week strip with a few calendar events.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-12 lg:py-16">
        <div class="mb-6 flex flex-wrap items-end justify-between gap-4">
            <div>
                <neura::heading level="h2" size="xl" class="tracking-tight">{{ __('This week') }}</neura::heading>
                <neura::text size="sm" class="mt-1 text-fg-secondary">{{ __('Mar 23 – Mar 29 · Team calendar') }}</neura::text>
            </div>
            <div class="flex gap-2">
                <neura::button variant="outline" size="sm" icon="chevron-left" />
                <neura::button variant="outline" size="sm" icon="chevron-right" />
            </div>
        </div>

        <div class="grid grid-cols-7 gap-px overflow-hidden rounded-2xl border border-dashed border-edge bg-edge">
            @foreach ([
                ['day' => __('Mon'), 'date' => '23', 'events' => [['title' => __('Standup'), 'time' => '09:30']]],
                ['day' => __('Tue'), 'date' => '24', 'events' => [['title' => __('Design review'), 'time' => '11:00'], ['title' => __('1:1 Amira'), 'time' => '15:00']]],
                ['day' => __('Wed'), 'date' => '25', 'events' => [['title' => __('Sprint planning'), 'time' => '10:00']]],
                ['day' => __('Thu'), 'date' => '26', 'events' => []],
                ['day' => __('Fri'), 'date' => '27', 'events' => [['title' => __('Demo day'), 'time' => '16:00']]],
                ['day' => __('Sat'), 'date' => '28', 'events' => []],
                ['day' => __('Sun'), 'date' => '29', 'events' => []],
            ] as $i => $col)
                <div @class([
                    'min-h-[160px] bg-surface p-2.5 sm:p-3',
                    'ring-1 ring-inset ring-fg/20' => $i === 2,
                ])>
                    <div class="mb-2 flex items-baseline justify-between gap-1">
                        <span class="font-mono text-[10px] uppercase tracking-[0.14em] text-fg-muted">{{ $col['day'] }}</span>
                        <span class="text-sm font-semibold tabular-nums text-fg">{{ $col['date'] }}</span>
                    </div>
                    <ul class="space-y-1.5">
                        @forelse ($col['events'] as $event)
                            <li class="rounded-md border border-dashed border-edge bg-surface-inset/50 px-1.5 py-1">
                                <neura::text size="xs" class="font-medium leading-tight text-fg">{{ $event['title'] }}</neura::text>
                                <p class="font-mono text-[10px] text-fg-muted">{{ $event['time'] }}</p>
                            </li>
                        @empty
                            <li class="pt-6 text-center font-mono text-[10px] text-fg-muted">—</li>
                        @endforelse
                    </ul>
                </div>
            @endforeach
        </div>
    </neura::container>
</section>
Settings nav settings-nav
Settings menu with preferences panel. 
{{--
    Settings nav — left menu with preferences panel and toggles on the right.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-12 lg:py-16">
        <div class="grid overflow-hidden rounded-2xl border border-dashed border-edge lg:grid-cols-12">
            <aside class="border-b border-dashed border-edge bg-surface-inset/30 p-4 lg:col-span-4 lg:border-b-0 lg:border-r">
                <neura::text size="xs" class="mb-3 px-2 font-mono uppercase tracking-[0.14em] text-fg-muted">{{ __('Settings') }}</neura::text>
                <nav class="space-y-0.5">
                    @foreach ([
                        ['label' => __('General'), 'icon' => 'cog-6-tooth', 'active' => false],
                        ['label' => __('Preferences'), 'icon' => 'adjustments-horizontal', 'active' => true],
                        ['label' => __('Notifications'), 'icon' => 'bell', 'active' => false],
                        ['label' => __('Security'), 'icon' => 'shield-check', 'active' => false],
                        ['label' => __('Billing'), 'icon' => 'credit-card', 'active' => false],
                    ] as $item)
                        <a href="#"
                            @class([
                                'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-colors',
                                'bg-surface font-medium text-fg shadow-sm' => $item['active'],
                                'text-fg-secondary hover:bg-surface/60 hover:text-fg' => ! $item['active'],
                            ])>
                            <neura::icon :name="$item['icon']" class="size-4 shrink-0" />
                            {{ $item['label'] }}
                        </a>
                    @endforeach
                </nav>
            </aside>

            <div class="space-y-6 p-5 sm:p-8 lg:col-span-8">
                <div>
                    <neura::heading level="h2" size="xl" class="tracking-tight">{{ __('Preferences') }}</neura::heading>
                    <neura::text size="sm" class="mt-1 text-fg-secondary">{{ __('Control how Atlas behaves for your account.') }}</neura::text>
                </div>

                <ul class="divide-y divide-dashed divide-edge rounded-xl border border-dashed border-edge">
                    @foreach ([
                        ['title' => __('Email digests'), 'body' => __('Weekly summary of workspace activity.'), 'on' => true, 'name' => 'email_digests'],
                        ['title' => __('Desktop notifications'), 'body' => __('Show alerts for deploys and mentions.'), 'on' => true, 'name' => 'desktop_notifications'],
                        ['title' => __('Marketing emails'), 'body' => __('Product updates and occasional tips.'), 'on' => false, 'name' => 'marketing_emails'],
                        ['title' => __('Compact density'), 'body' => __('Tighter spacing across tables and lists.'), 'on' => false, 'name' => 'compact_density'],
                    ] as $pref)
                        <li class="flex items-center justify-between gap-4 px-4 py-4">
                            <div class="min-w-0">
                                <neura::text size="sm" class="font-medium text-fg">{{ $pref['title'] }}</neura::text>
                                <neura::text size="xs" class="mt-0.5 text-fg-secondary">{{ $pref['body'] }}</neura::text>
                            </div>
                            <neura::switch :name="$pref['name']" :checked="$pref['on']" />
                        </li>
                    @endforeach
                </ul>

                <div class="flex justify-end">
                    <neura::button variant="primary" size="sm">{{ __('Save preferences') }}</neura::button>
                </div>
            </div>
        </div>
    </neura::container>
</section>
Detail sheet sheet-detail
Side-sheet style detail panel. 
{{--
    Sheet detail — side-sheet style detail panel with fields and actions.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="md" class="py-12 lg:py-16">
        <div class="ml-auto overflow-hidden rounded-2xl border border-dashed border-edge shadow-sm">
            <div class="flex items-start justify-between gap-3 border-b border-dashed border-edge px-5 py-4">
                <div>
                    <neura::heading level="h2" size="lg" class="tracking-tight">{{ __('Deploy details') }}</neura::heading>
                    <neura::text size="xs" class="mt-1 font-mono text-fg-muted">dep_8f2a · eu-west-1</neura::text>
                </div>
                <neura::button variant="ghost" size="sm" icon="x-mark" />
            </div>

            <div class="space-y-5 p-5">
                <div class="flex flex-wrap items-center gap-2">
                    <neura::badge variant="soft" color="success" pill>{{ __('Live') }}</neura::badge>
                    <neura::badge variant="soft" color="secondary" pill>{{ __('Production') }}</neura::badge>
                </div>

                <dl class="space-y-4">
                    @foreach ([
                        ['label' => __('Release'), 'value' => 'v2.4.1'],
                        ['label' => __('Triggered by'), 'value' => 'Lina Ortega'],
                        ['label' => __('Commit'), 'value' => 'a3c91e2'],
                        ['label' => __('Duration'), 'value' => '3m 42s'],
                        ['label' => __('Started'), 'value' => __('Today at 14:08')],
                    ] as $field)
                        <div class="flex items-start justify-between gap-4 border-b border-dashed border-edge pb-3 last:border-b-0 last:pb-0">
                            <dt class="font-mono text-[11px] uppercase tracking-[0.14em] text-fg-muted">{{ $field['label'] }}</dt>
                            <dd class="text-right text-sm font-medium text-fg">{{ $field['value'] }}</dd>
                        </div>
                    @endforeach
                </dl>
            </div>

            <div class="flex flex-wrap justify-end gap-2 border-t border-dashed border-edge px-5 py-4">
                <neura::button variant="outline" size="sm">{{ __('View logs') }}</neura::button>
                <neura::button variant="soft" size="sm" color="danger">{{ __('Rollback') }}</neura::button>
                <neura::button variant="primary" size="sm">{{ __('Promote') }}</neura::button>
            </div>
        </div>
    </neura::container>
</section>
Stats cards stats-cards
Three larger metric cards. 
{{--
    Stats cards — three larger metric cards with short descriptions.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-12 lg:py-16">
        <div class="mb-8">
            <neura::heading level="h2" size="xl" class="tracking-tight">{{ __('Key metrics') }}</neura::heading>
            <neura::text size="sm" class="mt-1 text-fg-secondary">{{ __('Signals that matter for this billing period.') }}</neura::text>
        </div>

        <div class="grid gap-4 lg:grid-cols-3">
            @foreach ([
                [
                    'label' => __('Monthly recurring revenue'),
                    'value' => '€48,240',
                    'delta' => '+12.4%',
                    'up' => true,
                    'body' => __('Net of refunds and failed renewals across Studio seats.'),
                    'icon' => 'banknotes',
                ],
                [
                    'label' => __('Active workspaces'),
                    'value' => '1,092',
                    'delta' => '+48',
                    'up' => true,
                    'body' => __('Workspaces with at least one deploy in the last 30 days.'),
                    'icon' => 'building-office-2',
                ],
                [
                    'label' => __('Median time to first deploy'),
                    'value' => '14m',
                    'delta' => '-3m',
                    'up' => true,
                    'body' => __('From invite acceptance to a successful production release.'),
                    'icon' => 'clock',
                ],
            ] as $card)
                <div class="rounded-2xl border border-dashed border-edge p-6">
                    <div class="flex items-start justify-between gap-3">
                        <div class="grid size-10 place-items-center rounded-lg border border-dashed border-edge bg-surface-inset">
                            <neura::icon :name="$card['icon']" class="size-5 text-fg-secondary" />
                        </div>
                        <span @class([
                            'inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-mono text-[11px]',
                            'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400' => $card['up'],
                            'bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400' => ! $card['up'],
                        ])>
                            <neura::icon :name="$card['up'] ? 'arrow-trending-up' : 'arrow-trending-down'" class="size-3.5" />
                            {{ $card['delta'] }}
                        </span>
                    </div>
                    <neura::text size="xs" class="mt-5 font-mono uppercase tracking-[0.14em] text-fg-muted">{{ $card['label'] }}</neura::text>
                    <p class="mt-2 text-3xl font-semibold tabular-nums tracking-tight text-fg">{{ $card['value'] }}</p>
                    <neura::text size="sm" class="mt-3 text-fg-secondary">{{ $card['body'] }}</neura::text>
                </div>
            @endforeach
        </div>
    </neura::container>
</section>
Stat row stats-row
Four-up metric strip with trend deltas. 
{{--
    Stat row — four-up metric strip for application dashboards.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-10 lg:py-12">
        <dl class="grid grid-cols-2 gap-px overflow-hidden rounded-2xl border border-dashed border-edge bg-edge lg:grid-cols-4">
            @foreach ([
                ['label' => __('MRR'), 'value' => '€24.8k', 'delta' => '+8.2%', 'up' => true],
                ['label' => __('Active users'), 'value' => '12,904', 'delta' => '+3.1%', 'up' => true],
                ['label' => __('Conversion'), 'value' => '4.6%', 'delta' => '-0.4%', 'up' => false],
                ['label' => __('NPS'), 'value' => '62', 'delta' => '+5', 'up' => true],
            ] as $stat)
                <div class="bg-surface px-5 py-6 sm:px-6">
                    <dt class="font-mono text-[11px] uppercase tracking-[0.14em] text-fg-muted">
                        {{ $stat['label'] }}
                    </dt>
                    <dd class="mt-2 flex items-end justify-between gap-3">
                        <span class="text-2xl font-semibold tabular-nums tracking-tight text-fg sm:text-3xl">
                            {{ $stat['value'] }}
                        </span>
                        <span @class([
                            'inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-mono text-[11px]',
                            'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400' => $stat['up'],
                            'bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400' => ! $stat['up'],
                        ])>
                            <neura::icon :name="$stat['up'] ? 'arrow-trending-up' : 'arrow-trending-down'"
                                class="size-3.5" />
                            {{ $stat['delta'] }}
                        </span>
                    </dd>
                </div>
            @endforeach
        </dl>
    </neura::container>
</section>
Team list team-list
Member roster with roles. 
{{--
    Team list — roster rows with role badges and overflow actions.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="5xl" class="py-12 lg:py-16">
        <div class="flex flex-wrap items-end justify-between gap-4">
            <div>
                <neura::heading level="h2" size="xl" class="tracking-tight">
                    {{ __('Team members') }}
                </neura::heading>
                <neura::text size="sm" class="mt-1 text-fg-secondary">
                    {{ __('People with access to this workspace.') }}
                </neura::text>
            </div>
            <neura::button variant="primary" size="sm" icon="user-plus">{{ __('Invite') }}</neura::button>
        </div>

        <ul class="mt-8 overflow-hidden rounded-2xl border border-dashed border-edge">
            @foreach ([
                ['name' => 'Amira Benali', 'email' => 'amira@northline.io', 'role' => __('Owner'), 'color' => 'primary'],
                ['name' => 'Jonas Keller', 'email' => 'jonas@northline.io', 'role' => __('Admin'), 'color' => 'info'],
                ['name' => 'Sofia Reyes', 'email' => 'sofia@northline.io', 'role' => __('Member'), 'color' => 'secondary'],
                ['name' => 'Chris Lee', 'email' => 'chris@northline.io', 'role' => __('Member'), 'color' => 'secondary'],
            ] as $member)
                <li
                    class="flex flex-wrap items-center gap-4 border-b border-dashed border-edge px-5 py-4 last:border-b-0">
                    <neura::avatar :name="$member['name']" color="auto" size="md" />
                    <div class="min-w-0 flex-1">
                        <neura::text size="sm" class="font-medium text-fg">{{ $member['name'] }}</neura::text>
                        <neura::text size="xs" class="text-fg-muted">{{ $member['email'] }}</neura::text>
                    </div>
                    <neura::badge variant="soft" :color="$member['color']" pill>{{ $member['role'] }}</neura::badge>
                    <neura::button variant="ghost" size="sm" icon="ellipsis-horizontal" class="shrink-0" />
                </li>
            @endforeach
        </ul>
    </neura::container>
</section>
Vertical timeline timeline-vertical
Project timeline with event markers. 
{{--
    Timeline vertical — project milestones with dots and event copy.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="md" class="py-12 lg:py-16">
        <div class="mb-8">
            <neura::heading level="h2" size="xl" class="tracking-tight">{{ __('Project timeline') }}</neura::heading>
            <neura::text size="sm" class="mt-1 text-fg-secondary">{{ __('Milestones for the Atlas redesign.') }}</neura::text>
        </div>

        <ol class="relative space-y-0 border-l border-dashed border-edge ml-3">
            @foreach ([
                ['title' => __('Kickoff'), 'body' => __('Scoped goals with design and engineering.'), 'time' => __('Mar 2'), 'done' => true],
                ['title' => __('Design system'), 'body' => __('Tokens, components and documentation synced.'), 'time' => __('Mar 14'), 'done' => true],
                ['title' => __('Beta launch'), 'body' => __('Invited 40 customers to the preview workspace.'), 'time' => __('Apr 1'), 'done' => true],
                ['title' => __('GA release'), 'body' => __('Public rollout and migration tooling.'), 'time' => __('Apr 22'), 'done' => false],
                ['title' => __('Post-launch review'), 'body' => __('Metrics review and backlog prioritization.'), 'time' => __('May 6'), 'done' => false],
            ] as $event)
                <li class="relative pb-8 pl-8 last:pb-0">
                    <span @class([
                        'absolute -left-[5px] top-1.5 size-2.5 rounded-full border-2 border-surface',
                        'bg-fg' => $event['done'],
                        'bg-edge ring-1 ring-fg-muted' => ! $event['done'],
                    ])></span>
                    <div class="flex flex-wrap items-start justify-between gap-2">
                        <neura::text size="sm" class="font-medium text-fg">{{ $event['title'] }}</neura::text>
                        <span class="font-mono text-[11px] text-fg-muted">{{ $event['time'] }}</span>
                    </div>
                    <neura::text size="sm" class="mt-1 text-fg-secondary">{{ $event['body'] }}</neura::text>
                    @if ($event['done'])
                        <neura::badge variant="soft" color="success" pill class="mt-2">{{ __('Complete') }}</neura::badge>
                    @else
                        <neura::badge variant="soft" color="secondary" pill class="mt-2">{{ __('Upcoming') }}</neura::badge>
                    @endif
                </li>
            @endforeach
        </ol>
    </neura::container>
</section>
Horizontal wizard wizard-horizontal
Step indicator with current-step form. 
{{--
    Wizard horizontal — numbered steps with a form panel for the current step.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="5xl" class="py-12 lg:py-16">
        <div class="rounded-2xl border border-dashed border-edge">
            <div class="border-b border-dashed border-edge px-5 py-5 sm:px-8">
                <ol class="flex flex-wrap items-center gap-2 sm:gap-0">
                    @foreach ([
                        ['n' => 1, 'label' => __('Details'), 'state' => 'done'],
                        ['n' => 2, 'label' => __('Environment'), 'state' => 'current'],
                        ['n' => 3, 'label' => __('Review'), 'state' => 'upcoming'],
                    ] as $i => $step)
                        @if ($i > 0)
                            <span class="mx-2 hidden h-px w-8 bg-edge sm:block lg:w-12"></span>
                        @endif
                        <li class="flex items-center gap-2">
                            <span @class([
                                'grid size-7 place-items-center rounded-full font-mono text-xs',
                                'bg-fg text-fg-on-emphasis' => $step['state'] === 'done' || $step['state'] === 'current',
                                'border border-dashed border-edge text-fg-muted' => $step['state'] === 'upcoming',
                            ])>
                                @if ($step['state'] === 'done')
                                    <neura::icon name="check" class="size-3.5" />
                                @else
                                    {{ $step['n'] }}
                                @endif
                            </span>
                            <neura::text size="sm" @class([
                                'font-medium text-fg' => $step['state'] !== 'upcoming',
                                'text-fg-muted' => $step['state'] === 'upcoming',
                            ])>{{ $step['label'] }}</neura::text>
                        </li>
                    @endforeach
                </ol>
            </div>

            <div class="space-y-6 p-5 sm:p-8">
                <div>
                    <neura::heading level="h2" size="lg" class="tracking-tight">{{ __('Choose an environment') }}</neura::heading>
                    <neura::text size="sm" class="mt-1 text-fg-secondary">{{ __('Where should the first deploy land?') }}</neura::text>
                </div>

                <form class="space-y-5" action="#" method="POST" onsubmit="return false;">
                    <neura::field>
                        <neura::label for="wizard-env">{{ __('Environment name') }}</neura::label>
                        <neura::input id="wizard-env" name="environment" value="production" />
                    </neura::field>

                    <neura::field>
                        <neura::label for="wizard-region">{{ __('Region') }}</neura::label>
                        <neura::input id="wizard-region" name="region" value="eu-west-1" />
                    </neura::field>

                    <div class="flex flex-wrap justify-between gap-2 pt-2">
                        <neura::button type="button" variant="ghost">{{ __('Back') }}</neura::button>
                        <neura::button type="submit" variant="primary">{{ __('Continue') }}</neura::button>
                    </div>
                </form>
            </div>
        </div>
    </neura::container>
</section>