App Shell
Full application shells — collapsible sidebars, org switchers, command search, breadcrumb headers and an inset content area.
Preview
resources/views/pages/app-shell-workspace.blade.php
@props([
'title' => 'Workspace',
'org' => 'Northwind',
'plan' => 'Team plan',
'user' => null,
'nav' => null,
'change' => null,
])
@php
$user ??= ['name' => 'Avery Quinn', 'email' => 'avery@northwind.com', 'initials' => 'AQ'];
$nav ??= [
[
'heading' => 'Workspace',
'items' => [
['label' => 'Overview', 'icon' => 'grid', 'href' => '#', 'current' => true],
['label' => 'Projects', 'icon' => 'folder', 'href' => '#', 'badge' => '8'],
['label' => 'Insights', 'icon' => 'chart', 'href' => '#'],
['label' => 'Members', 'icon' => 'users', 'href' => '#'],
],
],
[
'heading' => 'Account',
'items' => [
['label' => 'Billing', 'icon' => 'card', 'href' => '#'],
['label' => 'Settings', 'icon' => 'settings', 'href' => '#'],
],
],
];
// The most recent change rendered in the sidebar footer "latest change" row.
$change ??= ['who' => 'Marcus Lee', 'initials' => 'ML', 'what' => 'shipped Billing v2', 'when' => '12m ago'];
// 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"/>',
'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();
// Layout slots. Each one replaces one demo region, so an app can use this
// page as its layout; an omitted or empty slot keeps the demo region.
// `<x-slot:sidebar-footer>` arrives camel-cased and `<x-slot name="sidebar-footer">`
// keeps its dashes, so both spellings are read from the slot bag.
$layoutSlots = $__laravel_slots ?? [];
$layoutSlot = static function (string $name) use ($layoutSlots) {
$slot = $layoutSlots[$name] ?? $layoutSlots[\Illuminate\Support\Str::camel($name)] ?? null;
return $slot !== null && trim((string) $slot) !== '' ? $slot : null;
};
$brandSlot = $layoutSlot('brand');
$sidebarSlot = $layoutSlot('sidebar');
$sidebarFooterSlot = $layoutSlot('sidebar-footer');
$mobileActionsSlot = $layoutSlot('mobile-actions');
$overlaysSlot = $layoutSlot('overlays');
@endphp
<x-ui.section data-surface="admin" space="none" class="min-h-svh" {{ $attributes }}>
<x-ui.skip-link />
<div class="flex h-svh w-full overflow-hidden">
{{-- Sidebar: workspace identity, prominent command search, grouped nav and a latest-change row. --}}
<x-ui.sidebar class="max-md:hidden">
<x-ui.sidebar.header x-bind:class="expanded ? 'justify-between' : 'justify-center'">
@if ($brandSlot !== null)
<span x-show="expanded" data-slot="app-shell-brand" class="flex min-w-0 items-center gap-2">{{ $brandSlot }}</span>
@else
<span x-show="expanded" class="flex min-w-0 items-center gap-2">
<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">N</span>
<span class="flex min-w-0 flex-col">
<span class="truncate text-sm font-semibold leading-tight">{{ __($org) }}</span>
<span class="truncate text-sm text-muted-foreground">{{ __($plan) }}</span>
</span>
</span>
@endif
<x-ui.sidebar.trigger class="shrink-0" />
</x-ui.sidebar.header>
@if ($sidebarSlot !== null)
<div data-slot="app-shell-sidebar" class="flex min-h-0 flex-1 flex-col">{{ $sidebarSlot }}</div>
@else
{{-- Prominent command-style search: full input + ⌘K hint when expanded, icon-only when collapsed. --}}
<div class="px-2 pb-2">
<div x-show="expanded" class="relative">
<svg class="pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" 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>
<x-ui.input type="search" :placeholder="__('Search workspace…')" :aria-label="__('Search workspace')" class="w-full ps-10 pe-12" />
{{-- The platform's command key, as button's `mod` shortcut: ⌘ for a request from macOS or iOS, else Ctrl. Hidden on a touch screen. --}}
@php
$platformHint = trim((string) request()->header('Sec-CH-UA-Platform'), '" ');
$searchModKey = ($platformHint !== ''
? in_array(mb_strtolower($platformHint), ['macos', 'ios'], true)
: preg_match('/Macintosh|Mac OS X|iPhone|iPad|iPod/i', (string) request()->userAgent()) === 1) ? '⌘' : 'Ctrl';
@endphp
<x-ui.kbd aria-hidden="true" class="absolute end-2 top-1/2 -translate-y-1/2 pointer-coarse:hidden">{{ $searchModKey }}{{ $searchModKey === '⌘' ? '' : ' ' }}K</x-ui.kbd>
</div>
<x-ui.button x-show="!expanded" variant="outline" size="sm" class="w-full justify-center" :aria-label="__('Search workspace')">
<svg class="size-4" 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>
</x-ui.button>
</div>
<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>
@endif
<x-ui.sidebar.footer>
<x-ui.sidebar.separator />
@if ($sidebarFooterSlot !== null)
<div data-slot="app-shell-sidebar-footer" class="min-w-0">{{ $sidebarFooterSlot }}</div>
@else
{{-- Latest-change row pinned to the bottom of the shell. --}}
<div x-show="expanded" class="flex items-start gap-2 rounded-md bg-muted/40 p-2">
<x-ui.avatar size="sm" :fallback="$change['initials']" :alt="$change['who']" />
<div class="min-w-0 flex-1">
<p class="truncate text-sm leading-tight"><span class="font-medium text-foreground">{{ $change['who'] }}</span> <span class="text-muted-foreground">{{ __($change['what']) }}</span></p>
<p class="mt-0.5 text-sm text-muted-foreground">{{ __($change['when']) }}</p>
</div>
<span class="mt-2 size-2 shrink-0 rounded-full bg-success" aria-hidden="true"></span>
</div>
<div x-show="!expanded" class="flex justify-center">
<x-ui.avatar size="sm" :fallback="$change['initials']" :alt="$change['who']" />
</div>
@endif
</x-ui.sidebar.footer>
</x-ui.sidebar>
{{-- Inset: navbar strip with breadcrumb, theme controls and account, then scrollable content. --}}
<x-ui.sidebar.inset 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. --}}
@if ($mobileActionsSlot !== null || $brandSlot !== null)
{{-- The same mobile bar, built around the bare trigger so the brand and actions slots can sit in it. --}}
<div data-slot="app-shell-mobile-bar" class="flex items-center gap-2 border-b border-border p-2 md:hidden">
<x-ui.sidebar.mobile :nav="$mobileNav" :label="$org" id="app-shell-05-mobile-nav" bare>
@if ($brandSlot !== null)
<x-slot:brand>{{ $brandSlot }}</x-slot:brand>
@endif
</x-ui.sidebar.mobile>
@if ($brandSlot !== null)
<div data-slot="app-shell-mobile-brand" class="flex min-w-0 items-center gap-2">{{ $brandSlot }}</div>
@else
<span class="truncate text-sm font-semibold">{{ __($org) }}</span>
@endif
@if ($mobileActionsSlot !== null)
<div data-slot="app-shell-mobile-actions" class="ms-auto flex shrink-0 items-center gap-2">{{ $mobileActionsSlot }}</div>
@endif
</div>
@else
<x-ui.sidebar.mobile :nav="$mobileNav" :label="$org" id="app-shell-05-mobile-nav" />
@endif
<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>
{{-- Theme-control segmented toggle (purely visual: light / dark). --}}
<div class="hidden items-center rounded-md border border-input bg-muted/40 p-0.5 sm:flex" role="group" aria-label="{{ __('Theme') }}">
<x-ui.button variant="secondary" size="sm" class="h-7 gap-2 whitespace-nowrap shadow-sm" aria-pressed="true">
<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
{{ __('Light') }}
</x-ui.button>
<x-ui.button variant="ghost" size="sm" class="h-7 gap-2 whitespace-nowrap" aria-pressed="false">
<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
{{ __('Dark') }}
</x-ui.button>
</div>
<x-ui.button 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.avatar size="sm" :fallback="$user['initials']" :alt="$user['name']" />
</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">{{ __('Everything your team is working on, in one place.') }}</p>
</div>
<div class="flex shrink-0 gap-2">
<x-ui.button variant="outline" size="sm" class="whitespace-nowrap">{{ __('Invite') }}</x-ui.button>
<x-ui.button size="sm" class="whitespace-nowrap">{{ __('New project') }}</x-ui.button>
</div>
</div>
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
@foreach ([
['title' => 'Active projects', 'meta' => '8 in progress', 'badge' => 'On track', 'tone' => 'success'],
['title' => 'Open tasks', 'meta' => '142 assigned', 'badge' => 'Busy', 'tone' => 'warning'],
['title' => 'This week', 'meta' => '24 shipped', 'badge' => '+15%', 'tone' => 'secondary', 'dir' => 'ltr'],
] as $c)
<x-ui.card>
<x-ui.card.header>
<div class="flex items-center justify-between gap-2">
<x-ui.card.title class="text-base">{{ __($c['title']) }}</x-ui.card.title>
<x-ui.badge :variant="$c['tone']" :dir="$c['dir'] ?? null">{{ __($c['badge']) }}</x-ui.badge>
</div>
<x-ui.card.description>{{ __($c['meta']) }}</x-ui.card.description>
</x-ui.card.header>
<x-ui.card.content class="flex flex-col gap-2">
<x-ui.progress :value="64" :label="__(':title progress', ['title' => $c['title']])" />
<p class="text-sm text-muted-foreground">{{ __('Updated 12 minutes ago') }}</p>
</x-ui.card.content>
</x-ui.card>
@endforeach
</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>
@if ($overlaysSlot !== null)
{{ $overlaysSlot }}
@endif
</x-ui.section>Installation
terminal
php artisan ui:add pages/app-shell-workspaceRegistry contract
Install confidence
php artisan ui:add pages/app-shell-workspace
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.3.3
- License
- open
- Stability
- stable
- Contract
- v1
- Foundation
- ≥ 1.0.0
| Type | Generated target |
|---|---|
| blade | resources/views/pages/app-shell-workspace.blade.php |
Registry dependencies
avatar
badge
breadcrumb
button
card
input
kbd
progress
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-workspace.md
# Brok UI page: App Shell 05 (`app-shell-workspace`)
A sidebar workspace shell with a prominent command-style search and ⌘K hint, a navbar strip with a visual theme toggle, grouped navigation, and a latest-change row pinned to the sidebar footer.
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-workspace
```
## Render it
```blade
<x-pages.app-shell-workspace />
```
## Props
- `title` (string, default `Workspace`) — Section heading.
- `org` (string, default `Northwind`) — Organisation name shown in the sidebar header.
- `plan` (string, default `Team plan`) — Plan label shown under the organisation name.
- `user` (mixed|null, default `null`) — Signed-in user shown in the sidebar footer ({name, email, initials}); null falls back to sample data.
- `nav` (mixed|null, default `null`) — Grouped sidebar navigation sections; null falls back to sample data.
- `change` (mixed|null, default `null`) — Most recent change shown in the sidebar footer ({who, initials, what, when}); null falls back to sample data.
## Use when
- An app shell with a prominent command-style search (with a keyboard shortcut hint), a theme-toggle navbar strip, grouped navigation and a latest-change row pinned to the sidebar footer.
- It composes sidebar, sheet, breadcrumb, input, kbd and card primitives as the wrapper around admin screens that benefit from a command-palette-style search entry point.
- An application layout: pass the page as the default slot and the brand, sidebar, sidebar-footer, mobile-actions and overlays slots instead of copying and editing the page.
## Avoid when
- Not needing a command-search entry point; use app-shell-full-viewport, app-shell-scrollable or app-shell-inset instead.
## Rules
- Render the installed page with `<x-pages.app-shell-workspace />` 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-workspace
- Registry JSON (files, props, contract): https://brokui.dev/r/open/pages/app-shell-workspace.json
Ask about App Shell 05 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
- An app shell with a prominent command-style search (with a keyboard shortcut hint), a theme-toggle navbar strip, grouped navigation and a latest-change row pinned to the sidebar footer.
- It composes sidebar, sheet, breadcrumb, input, kbd and card primitives as the wrapper around admin screens that benefit from a command-palette-style search entry point.
- An application layout: pass the page as the default slot and the brand, sidebar, sidebar-footer, mobile-actions and overlays slots instead of copying and editing the page.
Avoid when
- Not needing a command-search entry point; use app-shell-full-viewport, app-shell-scrollable or app-shell-inset instead.
Anti-patterns
- Do not replace semantic props with conflicting utility classes.
- Do not remove labels, focus styles, or state attributes.
- Anatomy
Usage
Render the page as a component, or wire it to a route. Pass data where useful:
resources/views/welcome.blade.php
<x-pages.app-shell-workspace />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.
resources/views/pages/app-shell-workspace.blade.php
@props([
'title' => 'Workspace',
'org' => 'Northwind',
'plan' => 'Team plan',
'user' => null,
'nav' => null,
'change' => null,
])
@php
$user ??= ['name' => 'Avery Quinn', 'email' => 'avery@northwind.com', 'initials' => 'AQ'];
$nav ??= [
[
'heading' => 'Workspace',
'items' => [
['label' => 'Overview', 'icon' => 'grid', 'href' => '#', 'current' => true],
['label' => 'Projects', 'icon' => 'folder', 'href' => '#', 'badge' => '8'],
['label' => 'Insights', 'icon' => 'chart', 'href' => '#'],
['label' => 'Members', 'icon' => 'users', 'href' => '#'],
],
],
[
'heading' => 'Account',
'items' => [
['label' => 'Billing', 'icon' => 'card', 'href' => '#'],
['label' => 'Settings', 'icon' => 'settings', 'href' => '#'],
],
],
];
// The most recent change rendered in the sidebar footer "latest change" row.
$change ??= ['who' => 'Marcus Lee', 'initials' => 'ML', 'what' => 'shipped Billing v2', 'when' => '12m ago'];
// 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"/>',
'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();
// Layout slots. Each one replaces one demo region, so an app can use this
// page as its layout; an omitted or empty slot keeps the demo region.
// `<x-slot:sidebar-footer>` arrives camel-cased and `<x-slot name="sidebar-footer">`
// keeps its dashes, so both spellings are read from the slot bag.
$layoutSlots = $__laravel_slots ?? [];
$layoutSlot = static function (string $name) use ($layoutSlots) {
$slot = $layoutSlots[$name] ?? $layoutSlots[\Illuminate\Support\Str::camel($name)] ?? null;
return $slot !== null && trim((string) $slot) !== '' ? $slot : null;
};
$brandSlot = $layoutSlot('brand');
$sidebarSlot = $layoutSlot('sidebar');
$sidebarFooterSlot = $layoutSlot('sidebar-footer');
$mobileActionsSlot = $layoutSlot('mobile-actions');
$overlaysSlot = $layoutSlot('overlays');
@endphp
<x-ui.section data-surface="admin" space="none" class="min-h-svh" {{ $attributes }}>
<x-ui.skip-link />
<div class="flex h-svh w-full overflow-hidden">
{{-- Sidebar: workspace identity, prominent command search, grouped nav and a latest-change row. --}}
<x-ui.sidebar class="max-md:hidden">
<x-ui.sidebar.header x-bind:class="expanded ? 'justify-between' : 'justify-center'">
@if ($brandSlot !== null)
<span x-show="expanded" data-slot="app-shell-brand" class="flex min-w-0 items-center gap-2">{{ $brandSlot }}</span>
@else
<span x-show="expanded" class="flex min-w-0 items-center gap-2">
<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">N</span>
<span class="flex min-w-0 flex-col">
<span class="truncate text-sm font-semibold leading-tight">{{ __($org) }}</span>
<span class="truncate text-sm text-muted-foreground">{{ __($plan) }}</span>
</span>
</span>
@endif
<x-ui.sidebar.trigger class="shrink-0" />
</x-ui.sidebar.header>
@if ($sidebarSlot !== null)
<div data-slot="app-shell-sidebar" class="flex min-h-0 flex-1 flex-col">{{ $sidebarSlot }}</div>
@else
{{-- Prominent command-style search: full input + ⌘K hint when expanded, icon-only when collapsed. --}}
<div class="px-2 pb-2">
<div x-show="expanded" class="relative">
<svg class="pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" 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>
<x-ui.input type="search" :placeholder="__('Search workspace…')" :aria-label="__('Search workspace')" class="w-full ps-10 pe-12" />
{{-- The platform's command key, as button's `mod` shortcut: ⌘ for a request from macOS or iOS, else Ctrl. Hidden on a touch screen. --}}
@php
$platformHint = trim((string) request()->header('Sec-CH-UA-Platform'), '" ');
$searchModKey = ($platformHint !== ''
? in_array(mb_strtolower($platformHint), ['macos', 'ios'], true)
: preg_match('/Macintosh|Mac OS X|iPhone|iPad|iPod/i', (string) request()->userAgent()) === 1) ? '⌘' : 'Ctrl';
@endphp
<x-ui.kbd aria-hidden="true" class="absolute end-2 top-1/2 -translate-y-1/2 pointer-coarse:hidden">{{ $searchModKey }}{{ $searchModKey === '⌘' ? '' : ' ' }}K</x-ui.kbd>
</div>
<x-ui.button x-show="!expanded" variant="outline" size="sm" class="w-full justify-center" :aria-label="__('Search workspace')">
<svg class="size-4" 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>
</x-ui.button>
</div>
<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>
@endif
<x-ui.sidebar.footer>
<x-ui.sidebar.separator />
@if ($sidebarFooterSlot !== null)
<div data-slot="app-shell-sidebar-footer" class="min-w-0">{{ $sidebarFooterSlot }}</div>
@else
{{-- Latest-change row pinned to the bottom of the shell. --}}
<div x-show="expanded" class="flex items-start gap-2 rounded-md bg-muted/40 p-2">
<x-ui.avatar size="sm" :fallback="$change['initials']" :alt="$change['who']" />
<div class="min-w-0 flex-1">
<p class="truncate text-sm leading-tight"><span class="font-medium text-foreground">{{ $change['who'] }}</span> <span class="text-muted-foreground">{{ __($change['what']) }}</span></p>
<p class="mt-0.5 text-sm text-muted-foreground">{{ __($change['when']) }}</p>
</div>
<span class="mt-2 size-2 shrink-0 rounded-full bg-success" aria-hidden="true"></span>
</div>
<div x-show="!expanded" class="flex justify-center">
<x-ui.avatar size="sm" :fallback="$change['initials']" :alt="$change['who']" />
</div>
@endif
</x-ui.sidebar.footer>
</x-ui.sidebar>
{{-- Inset: navbar strip with breadcrumb, theme controls and account, then scrollable content. --}}
<x-ui.sidebar.inset 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. --}}
@if ($mobileActionsSlot !== null || $brandSlot !== null)
{{-- The same mobile bar, built around the bare trigger so the brand and actions slots can sit in it. --}}
<div data-slot="app-shell-mobile-bar" class="flex items-center gap-2 border-b border-border p-2 md:hidden">
<x-ui.sidebar.mobile :nav="$mobileNav" :label="$org" id="app-shell-05-mobile-nav" bare>
@if ($brandSlot !== null)
<x-slot:brand>{{ $brandSlot }}</x-slot:brand>
@endif
</x-ui.sidebar.mobile>
@if ($brandSlot !== null)
<div data-slot="app-shell-mobile-brand" class="flex min-w-0 items-center gap-2">{{ $brandSlot }}</div>
@else
<span class="truncate text-sm font-semibold">{{ __($org) }}</span>
@endif
@if ($mobileActionsSlot !== null)
<div data-slot="app-shell-mobile-actions" class="ms-auto flex shrink-0 items-center gap-2">{{ $mobileActionsSlot }}</div>
@endif
</div>
@else
<x-ui.sidebar.mobile :nav="$mobileNav" :label="$org" id="app-shell-05-mobile-nav" />
@endif
<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>
{{-- Theme-control segmented toggle (purely visual: light / dark). --}}
<div class="hidden items-center rounded-md border border-input bg-muted/40 p-0.5 sm:flex" role="group" aria-label="{{ __('Theme') }}">
<x-ui.button variant="secondary" size="sm" class="h-7 gap-2 whitespace-nowrap shadow-sm" aria-pressed="true">
<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
{{ __('Light') }}
</x-ui.button>
<x-ui.button variant="ghost" size="sm" class="h-7 gap-2 whitespace-nowrap" aria-pressed="false">
<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
{{ __('Dark') }}
</x-ui.button>
</div>
<x-ui.button 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.avatar size="sm" :fallback="$user['initials']" :alt="$user['name']" />
</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">{{ __('Everything your team is working on, in one place.') }}</p>
</div>
<div class="flex shrink-0 gap-2">
<x-ui.button variant="outline" size="sm" class="whitespace-nowrap">{{ __('Invite') }}</x-ui.button>
<x-ui.button size="sm" class="whitespace-nowrap">{{ __('New project') }}</x-ui.button>
</div>
</div>
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
@foreach ([
['title' => 'Active projects', 'meta' => '8 in progress', 'badge' => 'On track', 'tone' => 'success'],
['title' => 'Open tasks', 'meta' => '142 assigned', 'badge' => 'Busy', 'tone' => 'warning'],
['title' => 'This week', 'meta' => '24 shipped', 'badge' => '+15%', 'tone' => 'secondary', 'dir' => 'ltr'],
] as $c)
<x-ui.card>
<x-ui.card.header>
<div class="flex items-center justify-between gap-2">
<x-ui.card.title class="text-base">{{ __($c['title']) }}</x-ui.card.title>
<x-ui.badge :variant="$c['tone']" :dir="$c['dir'] ?? null">{{ __($c['badge']) }}</x-ui.badge>
</div>
<x-ui.card.description>{{ __($c['meta']) }}</x-ui.card.description>
</x-ui.card.header>
<x-ui.card.content class="flex flex-col gap-2">
<x-ui.progress :value="64" :label="__(':title progress', ['title' => $c['title']])" />
<p class="text-sm text-muted-foreground">{{ __('Updated 12 minutes ago') }}</p>
</x-ui.card.content>
</x-ui.card>
@endforeach
</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>
@if ($overlaysSlot !== null)
{{ $overlaysSlot }}
@endif
</x-ui.section>
Ownership & lifecycle
Owner, release state, review evidence and adoption for this item.
- Owner
- Platform UI (@JoshJML)
- Current version
-
1.3.3 - Status
- Stable
- License
-
open - Deprecation
- Not deprecated
- Contract
-
v1 - Foundation
-
≥ 1.0.0