Laravel App Shell Component

Name: Aura UI
Author: BlueStarSystem

Pro

A complete application layout shell with a sticky, full-height sidebar and a scrollable, centered content area. Handles responsive off-canvas navigation on mobile.

A App Shell built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::app-shell>

Try it live in the docs Get Aura Pro

Installation

composer require bluestarsystem/aura-ui

The App Shell is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →

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>

See the full API, props and live examples in the App Shell documentation.

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.

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.