App Shell

A layout wrapper that provides a consistent structure for application layouts with header, sidebar, aside, and footer slots.

Anatomy 

<script>
  import { AppShell } from "@saas-ui/svelte/components/app-shell";
</script>

<AppShell>
  {#snippet header()}
    <nav>Header / Navigation</nav>
  {/snippet}

  {#snippet sidebar()}
    <aside>Sidebar</aside>
  {/snippet}

  <main>Main Content</main>

  {#snippet aside()}
    <aside>Right Panel</aside>
  {/snippet}

  {#snippet footer()}
    <footer>Footer</footer>
  {/snippet}
</AppShell>

Examples

Props

Prop Type Default Description
header any - The top header navigation.
sidebar any - Main sidebar, positioned on the left.
aside any - Secondary sidebar, positioned on the right.
footer any - The footer.
height text 100dvh The height of the app shell.
children any - The content to be rendered inside the component.
class text - Additional CSS classes to apply.