App Shell

Open + Pro variants

Full application shells — collapsible sidebars, org switchers, command search, breadcrumb headers and an inset content area.

1 of 14

resources/views/pages/app-shell-bordered.blade.php Blade

@props([
    'title' => 'Dashboard',
    'org' => 'Acme Inc.',
    'plan' => 'Pro plan',
    'user' => null,
    'nav' => null,
    'commands' => null,
    'notificationsHref' => '#',
    'inviteHref' => '#',
    'createHref' => '#',
    'variant' => 'sidebar',
])

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $variant = $styles['normalizeVariant']($variant) === 'inset' ? 'inset' : 'sidebar';

    $user ??= ['name' => 'Jordan Rivera', 'email' => 'jordan@acme.com', 'initials' => 'JR'];

    $nav ??= [
        [
            'heading' => 'Platform',
            'items' => [
                ['label' => 'Dashboard', 'icon' => 'grid', 'href' => '#', 'current' => true],
                ['label' => 'Projects', 'icon' => 'folder', 'href' => '#'],
                ['label' => 'Analytics', 'icon' => 'chart', 'href' => '#'],
                ['label' => 'Customers', 'icon' => 'users', 'href' => '#', 'badge' => '12'],
            ],
        ],
        [
            'heading' => 'Workspace',
            'items' => [
                ['label' => 'Team', 'icon' => 'user', 'href' => '#'],
                ['label' => 'Billing', 'icon' => 'card', 'href' => '#'],
                ['label' => 'Settings', 'icon' => 'settings', 'href' => '#'],
            ],
        ],
    ];

    $commands ??= collect($nav)
        ->flatMap(fn ($group) => $group['items'] ?? [])
        ->map(fn ($item) => [
            'value' => str($item['label'])->slug()->value(),
            'label' => $item['label'],
            'href' => $item['href'],
            'keywords' => trim(($item['label'] ?? '').' '.($item['icon'] ?? '')),
        ])
        ->values()
        ->all();

    // Trusted, developer-authored icon paths rendered inside menu buttons (escaped
    // output would mangle the SVG markup). Never feed user input through this map.
    $icons = [
        'grid' => '<rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/>',
        'folder' => '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>',
        'chart' => '<path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/>',
        'users' => '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
        'user' => '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
        'card' => '<rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/>',
        'settings' => '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
    ];

    // Same groups as $nav, with each item's icon key resolved to raw SVG shape
    // markup, so the mobile sidebar part can render icons without knowing this
    // page's icon map.
    $mobileNav = collect($nav)->map(fn ($group) => [
        'heading' => $group['heading'],
        'items' => collect($group['items'])->map(fn ($item) => [
            ...$item,
            'icon' => $icons[$item['icon']] ?? null,
        ])->all(),
    ])->all();
@endphp

<x-ui.section data-surface="admin" data-visual-contracts="VC-001 VC-002" space="none" class="min-h-svh" {{ $attributes }}>
    <x-ui.skip-link />
    <div @class(['flex h-svh w-full overflow-hidden', 'bg-canvas' => $variant === 'inset'])>
        {{-- Sidebar: collapsible icon rail with org switcher, grouped nav and a user menu. --}}
        <x-ui.sidebar :variant="$variant" class="max-md:hidden">
            <x-ui.sidebar.header x-bind:class="expanded ? 'justify-between' : 'justify-center'">
                <x-ui.dropdown x-show="expanded" class="min-w-0 flex-1">
                    <x-ui.dropdown.trigger class="w-full gap-2 rounded-md px-2 py-2 hover:bg-muted">
                        <span class="flex size-8 shrink-0 items-center justify-center rounded-md bg-primary text-sm font-semibold text-primary-foreground" aria-hidden="true">A</span>
                        <span class="flex min-w-0 flex-col items-start">
                            <span class="truncate text-sm font-semibold leading-tight">{{ __($org) }}</span>
                            <span class="truncate text-xs text-muted-foreground">{{ __($plan) }}</span>
                        </span>
                        <svg class="ms-auto size-4 shrink-0 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                    </x-ui.dropdown.trigger>
                    <x-ui.dropdown.content class="w-56">
                        <x-ui.dropdown.label>{{ __('Workspaces') }}</x-ui.dropdown.label>
                        <x-ui.dropdown.item href="#">{{ __('Acme Inc.') }}</x-ui.dropdown.item>
                        <x-ui.dropdown.item href="#">{{ __('Globex LLC') }}</x-ui.dropdown.item>
                        <x-ui.dropdown.separator />
                        <x-ui.dropdown.item href="#">{{ __('Create workspace') }}</x-ui.dropdown.item>
                    </x-ui.dropdown.content>
                </x-ui.dropdown>
                <x-ui.sidebar.trigger class="shrink-0" />
            </x-ui.sidebar.header>

            <x-ui.sidebar.content>
                @foreach ($nav as $group)
                    <x-ui.sidebar.group>
                        <x-ui.sidebar.group-label>{{ __($group['heading']) }}</x-ui.sidebar.group-label>
                        <x-ui.sidebar.menu>
                            @foreach ($group['items'] as $item)
                                <x-ui.sidebar.menu-item>
                                    <x-ui.sidebar.menu-button :href="$item['href']" :active="$item['current'] ?? false" x-bind:class="expanded || 'justify-center'" :title="__($item['label'])">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $icons[$item['icon']] ?? '' !!}</svg>
                                        <span x-show="expanded" class="truncate">{{ __($item['label']) }}</span>
                                        @isset($item['badge'])
                                            <x-ui.badge variant="secondary" x-show="expanded" class="ms-auto">{{ $item['badge'] }}</x-ui.badge>
                                        @endisset
                                    </x-ui.sidebar.menu-button>
                                </x-ui.sidebar.menu-item>
                            @endforeach
                        </x-ui.sidebar.menu>
                    </x-ui.sidebar.group>
                @endforeach
            </x-ui.sidebar.content>

            <x-ui.sidebar.footer>
                <x-ui.sidebar.separator />
                <x-ui.dropdown>
                    <x-ui.dropdown.trigger class="w-full gap-2 rounded-md p-2 hover:bg-muted" x-bind:class="expanded || 'justify-center'">
                        <x-ui.avatar size="sm" :fallback="$user['initials']" :alt="$user['name']" />
                        <span x-show="expanded" class="flex min-w-0 flex-col items-start">
                            <span class="truncate text-sm font-medium leading-tight">{{ $user['name'] }}</span>
                            <span class="truncate text-xs text-muted-foreground">{{ $user['email'] }}</span>
                        </span>
                        <svg x-show="expanded" class="ms-auto size-4 shrink-0 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                    </x-ui.dropdown.trigger>
                    <x-ui.dropdown.content align="end" class="w-56">
                        <x-ui.dropdown.label>{{ $user['name'] }}</x-ui.dropdown.label>
                        <x-ui.dropdown.separator />
                        <x-ui.dropdown.item href="#">{{ __('Profile') }}</x-ui.dropdown.item>
                        <x-ui.dropdown.item href="#">{{ __('Settings') }}</x-ui.dropdown.item>
                        <x-ui.dropdown.separator />
                        <x-ui.dropdown.item href="#">{{ __('Sign out') }}</x-ui.dropdown.item>
                    </x-ui.dropdown.content>
                </x-ui.dropdown>
            </x-ui.sidebar.footer>
        </x-ui.sidebar>

        {{-- Inset: top bar + scrollable content. --}}
        <x-ui.sidebar.inset :variant="$variant" id="main-content" class="min-w-0">
            {{-- Mobile navigation: the desktop sidebar is hidden below `md`, so a hamburger opens the full nav in a start-side sheet. --}}
            <x-ui.sidebar.mobile :nav="$mobileNav" :label="$org" id="app-shell-01-mobile-nav" />

            <header class="flex h-16 shrink-0 items-center gap-4 border-b border-border bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 sm:px-6">
                <x-ui.breadcrumb class="min-w-0 flex-1">
                    <x-ui.breadcrumb.list>
                        <x-ui.breadcrumb.item class="max-sm:hidden">
                            <x-ui.breadcrumb.link href="#">{{ __($org) }}</x-ui.breadcrumb.link>
                        </x-ui.breadcrumb.item>
                        <x-ui.breadcrumb.separator class="max-sm:hidden" />
                        <x-ui.breadcrumb.item>
                            <x-ui.breadcrumb.page>{{ __($title) }}</x-ui.breadcrumb.page>
                        </x-ui.breadcrumb.item>
                    </x-ui.breadcrumb.list>
                </x-ui.breadcrumb>

                <x-ui.dialog
                    @keydown.window.prevent.meta.k="show()"
                    @keydown.window.prevent.ctrl.k="show()"
                    @command-select.window="hide()"
                >
                    <x-ui.dialog.trigger class="hidden h-9 w-64 justify-start gap-2 rounded-md border border-input bg-background px-4 text-sm text-muted-foreground transition-colors hover:bg-muted lg:inline-flex">
                        <svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                        <span>{{ __('Search or run a command…') }}</span>
                        <x-ui.kbd class="ms-auto">⌘K</x-ui.kbd>
                    </x-ui.dialog.trigger>
                    <x-ui.dialog.content size="md" class="overflow-hidden p-0">
                        <x-ui.dialog.title class="sr-only">{{ __('Command palette') }}</x-ui.dialog.title>
                        <x-ui.dialog.description class="sr-only">{{ __('Search for a page or command.') }}</x-ui.dialog.description>
                        <x-ui.command class="rounded-none border-0">
                            <x-ui.command.input :placeholder="__('Type a command or search…')" />
                            <x-ui.command.list>
                                <x-ui.command.empty>{{ __('No results found.') }}</x-ui.command.empty>
                                <x-ui.command.group :heading="__('Navigation')" :keys="collect($commands)->pluck('keywords')->all()">
                                    @foreach ($commands as $command)
                                        <x-ui.command.item
                                            :value="$command['value']"
                                            :keywords="$command['keywords'] ?? $command['label']"
                                            :href="$command['href']"
                                        >
                                            {{ __($command['label']) }}
                                        </x-ui.command.item>
                                    @endforeach
                                </x-ui.command.group>
                            </x-ui.command.list>
                        </x-ui.command>
                    </x-ui.dialog.content>
                </x-ui.dialog>

                <x-ui.button :href="$notificationsHref" variant="ghost" size="sm" class="relative" :aria-label="__('Notifications')">
                    <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>
                    <span class="absolute end-2 top-2 size-2 rounded-full bg-primary ring-2 ring-background" aria-hidden="true"></span>
                </x-ui.button>

                <x-ui.dropdown>
                    <x-ui.dropdown.trigger :aria-label="__('Account menu')" class="rounded-full focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">
                        <x-ui.avatar size="sm" :fallback="$user['initials']" :alt="$user['name']" />
                    </x-ui.dropdown.trigger>
                    <x-ui.dropdown.content align="end" class="w-56">
                        <x-ui.dropdown.label>{{ $user['name'] }}</x-ui.dropdown.label>
                        <x-ui.dropdown.separator />
                        <x-ui.dropdown.item href="#">{{ __('Profile') }}</x-ui.dropdown.item>
                        <x-ui.dropdown.item href="#">{{ __('Billing') }}</x-ui.dropdown.item>
                        <x-ui.dropdown.item href="#">{{ __('Sign out') }}</x-ui.dropdown.item>
                    </x-ui.dropdown.content>
                </x-ui.dropdown>
            </header>

            <div data-slot="app-shell-content" class="flex-1 overflow-auto p-4 sm:p-6">
                @if (trim($slot) !== '')
                    {{ $slot }}
                @else
                    <div class="mx-auto flex max-w-7xl flex-col gap-6">
                        <div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
                            <div>
                                <h1 class="text-2xl font-bold tracking-tight">{{ __($title) }}</h1>
                                <p class="mt-2 text-sm text-muted-foreground">{{ __('Welcome back — here is what is happening today.') }}</p>
                            </div>
                            <div class="flex shrink-0 gap-2">
                                <x-ui.button :href="$inviteHref" variant="outline" size="sm" class="whitespace-nowrap">{{ __('Invite') }}</x-ui.button>
                                <x-ui.button :href="$createHref" size="sm" class="whitespace-nowrap">{{ __('New project') }}</x-ui.button>
                            </div>
                        </div>

                        {{-- Placeholder content region — drop your page here. --}}
                        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                            @for ($i = 0; $i < 3; $i++)
                                <x-ui.card>
                                    <x-ui.card.header class="gap-4">
                                        <div class="h-3 w-24 rounded bg-muted"></div>
                                        <div class="h-7 w-32 rounded bg-muted"></div>
                                    </x-ui.card.header>
                                    <x-ui.card.content class="flex flex-col gap-2">
                                        <div class="h-3 w-full rounded bg-muted"></div>
                                        <div class="h-3 w-4/5 rounded bg-muted"></div>
                                    </x-ui.card.content>
                                </x-ui.card>
                            @endfor
                        </div>

                        <x-ui.card>
                            <x-ui.card.header>
                                <x-ui.card.title>{{ __('Content area') }}</x-ui.card.title>
                                <x-ui.card.description>{{ __('Compose your application views inside the inset.') }}</x-ui.card.description>
                            </x-ui.card.header>
                            <x-ui.card.content>
                                <div class="flex min-h-64 items-center justify-center rounded-lg border border-dashed border-border bg-muted/30 text-sm text-muted-foreground">
                                    {{ __('Your page content goes here') }}
                                </div>
                            </x-ui.card.content>
                        </x-ui.card>
                    </div>
                @endif
            </div>
        </x-ui.sidebar.inset>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add pages/app-shell-bordered

Installs these dependencies automatically:

avatar badge breadcrumb button card command dialog dropdown kbd section sheet sidebar skip-link

Registry contract

Install confidence

php artisan ui:add pages/app-shell-bordered writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version: 1.5.3
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/pages/app-shell-bordered.blade.php

Registry dependencies

avatar badge breadcrumb button card command dialog dropdown kbd section sheet sidebar skip-link

Package dependencies

composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: what the page is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this page in an assistant.

app-shell-bordered.md

# Brok UI page: App Shell (`app-shell-bordered`)

An application shell with responsive navigation, an integrated keyboard command palette, route-backed global actions, breadcrumbs, account controls, and an inset content area.

Brok UI is a Laravel Blade registry. `ui:add` copies this page into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.

## Install

```bash
php artisan ui:add pages/app-shell-bordered
```

## Render it

```blade
<x-pages.app-shell-bordered variant="sidebar" />
```

## Props

- `title` (string, default `Dashboard`) — Page title in the breadcrumb and the sample heading.
- `org` (string, default `Acme Inc.`) — Organisation name in the workspace switcher, the breadcrumb and the mobile navigation sheet.
- `plan` (string, default `Pro plan`) — Plan label under the organisation name.
- `user` (array|null, default `null`) — Signed-in user ({name, email, initials}) for the account menus; null falls back to sample data.
- `nav` (array|null, default `null`) — Grouped navigation ({heading, items: [{label, icon, href, current?, badge?}]}); null falls back to sample data.
- `commands` (array|null, default `null`) — Command palette entries ({value, label, href, keywords}); null derives them from nav.
- `notifications-href` (string, default `#`) — Target of the notifications button.
- `invite-href` (string, default `#`) — Target of the sample Invite action.
- `create-href` (string, default `#`) — Target of the sample New project action.
- `variant` (sidebar|inset, default `sidebar`) (variant) — `sidebar` keeps the bordered card rail next to a flat content column. `inset` puts the rail on the canvas colour and raises the content into a rounded, bordered panel from the medium breakpoint up (sidebar and sidebar.inset `variant="inset"`, with `bg-canvas` on the shell row).

## Use when

- Starting an authenticated application with global navigation and an inset content region.

## Avoid when

- Adding a single page to an application that already owns its shell.
- Wanting a full-viewport sidebar with a breadcrumb navbar and keyboard-shortcut hints instead of a bordered inset shell; use app-shell-full-viewport instead.

## Rules

- Render the installed page with `<x-pages.app-shell-bordered />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.

## Links

- Docs: https://brokui.dev/pages/app-shell-bordered
- Registry JSON (files, props, contract): https://brokui.dev/r/open/pages/app-shell-bordered.json

Ask about App Shell in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Guidance

Use when

Starting an authenticated application with global navigation and an inset content region.

Avoid when

Adding a single page to an application that already owns its shell.
Wanting a full-viewport sidebar with a breadcrumb navbar and keyboard-shortcut hints instead of a bordered inset shell; use app-shell-full-viewport instead.

Anti-patterns

Do not replace semantic props with conflicting utility classes.
Do not remove labels, focus styles, or state attributes.

Usage

Render the page as a component, or wire it to a route. Pass data where useful:

resources/views/welcome.blade.php Blade

<x-pages.app-shell-bordered />

Built from blocks & primitives

This page composes installed <brok:*> primitives and semantic design tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by editing CSS variables; flip the preview to RTL to confirm it mirrors.

Source

The exact, editable file ui:add writes into your app. The preview above renders this same source — there are no preview-only pages.