Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

App Shell

A simple application layout with optional header, sidebar, and main content areas. The header can use sidebar-trigger to toggle the sidebar — Alpine open state lives on the shell.

Usage
My App

Welcome

Your main content goes here.

example.blade.php 
<x-slate::app-shell class="min-h-[220px] rounded-md border">
    <x-slot:header>
        <x-slate::sidebar-trigger />
        <span class="text-sm font-medium">My App</span>
    </x-slot:header>
    <x-slot:sidebar>
        <aside class="w-48 shrink-0 border-e bg-muted/30 p-4">
            <nav class="grid gap-1 text-sm">
                <a href="#" class="rounded-md px-2 py-1.5 hover:bg-accent">Home</a>
                <a href="#" class="rounded-md px-2 py-1.5 hover:bg-accent">Projects</a>
            </nav>
        </aside>
    </x-slot:sidebar>
    <x-slot:main>
        <div class="p-6">
            <h2 class="text-lg font-semibold">Welcome</h2>
            <p class="mt-2 text-sm text-muted-foreground">Your main content goes here.</p>
        </div>
    </x-slot:main>
</x-slate::app-shell>
Last updated .