Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add app-shell

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Pro Component — This component requires an Aura UI Pro license.

Overview

The App Shell is the outermost layout for an admin or dashboard: a sticky, full-height sidebar next to a scrollable, centered content area. It wraps x-aura::sidebar so you get the sidebar's brand, sections, items and collapse toggle, plus a footer slot for a user/logout block — and it adds the responsive off-canvas drawer on mobile automatically.

It replaces the boilerplate wrapper (sticky top-0 h-screen around the sidebar, a flex-1 scrollable main, a centered container) that you would otherwise re-create in every project.

Basic Usage

<x-aura::app-shell max-content-width="7xl">
    <x-slot:sidebar>
        <x-aura::sidebar.brand href="/">Acme</x-aura::sidebar.brand>
        <x-aura::sidebar.section label="Main">
            <x-aura::sidebar.item icon="home" label="Dashboard" href="/dashboard" :active="request()->routeIs('dashboard')" />
            <x-aura::sidebar.item icon="shopping-cart" label="Orders" href="/orders" />
        </x-aura::sidebar.section>
    </x-slot:sidebar>

    <x-slot:sidebarFooter>
        <div class="flex items-center gap-3 p-4">
            <x-aura::avatar initials="JD" size="sm" />
            <span class="text-sm">Jane Doe</span>
        </div>
    </x-slot:sidebarFooter>

    {{-- Main content, centered and scrollable --}}
    <h1 class="text-2xl font-bold">Dashboard</h1>
</x-aura::app-shell>

On screens below md, the sidebar collapses into an off-canvas drawer with a hamburger toggle in the content area; press Escape or tap the backdrop to close it.

Slots

Slot Description
sidebar Sidebar navigation content (brand, sections, items). Rendered inside a full-height x-aura::sidebar.
sidebarFooter Optional block pinned to the bottom of the sidebar (e.g. the signed-in user and a logout button). Maps to the sidebar's footer slot.
(default) The main content, placed in a centered, scrollable container.

Props

Prop Type Default Description
collapsible bool true Show the sidebar collapse toggle on desktop.
width string 260px Expanded sidebar width.
maxContentWidth string 7xl Max width of the content container. Accepts 3xl–7xl, screen-2xl, full, or a raw CSS value.

The footer slot added to x-aura::sidebar also works when you use the sidebar directly, without the App Shell:

<x-aura::sidebar class="h-full">
    <x-aura::sidebar.section label="Main">…</x-aura::sidebar.section>
    <x-slot:footer>
        <div class="p-4 text-sm">Signed in as Jane</div>
    </x-slot:footer>
</x-aura::sidebar>