Skip to content
omaris · Learn
Layout

App Shell

The frame a dashboard sits in: a sidebar that stays put and one column that scrolls.

Full reference: every prop and when to use it →

Walkthrough

1. Dashboard frame

The layout most omaris apps end up with. Only the content column scrolls — the sidebar stays put and the app bar finds its own scroller, which is what makes sticky work without a second scrollbar.

Overview

<script lang="ts">	import {		AppShell,		AppShellSidebar,		AppShellMain,		AppShellContent,		NavigationDrawer,		NavigationDrawerItem,		TopAppBar	} from 'omaris';​	let selected = $state('Overview');</script>​<div class="h-96 w-full overflow-hidden rounded-shape-lg border border-border">	<AppShell class="h-full">		<AppShellSidebar breakpoint="sm">			<NavigationDrawer bordered label="Sections">				<NavigationDrawerItem					label="Overview"					selected={selected === 'Overview'}					onclick={() => (selected = 'Overview')}				/>				<NavigationDrawerItem					label="Orders"					selected={selected === 'Orders'}					onclick={() => (selected = 'Orders')}				/>				<NavigationDrawerItem					label="Customers"					selected={selected === 'Customers'}					onclick={() => (selected = 'Customers')}				/>			</NavigationDrawer>		</AppShellSidebar>​		<AppShellMain>			<TopAppBar title={selected} sticky />			<AppShellContent width="lg">				<div class="flex flex-col gap-3">					<!-- Enough rows to have something to scroll. -->					{#each { length: 12 }, i (i)}						<div class="h-12 rounded-shape-md bg-surface-container"></div>					{/each}				</div>			</AppShellContent>		</AppShellMain>	</AppShell></div>

2. Content width

width sets the reading measure and centres it. full is right for a table, md for prose.

width="sm" — a column narrow enough to read comfortably, centred in whatever space the shell has.

<script lang="ts">	import { AppShell, AppShellMain, AppShellContent } from 'omaris';</script>​<div class="h-64 w-full overflow-hidden rounded-shape-lg border border-border">	<AppShell>		<AppShellMain>			<AppShellContent width="sm">				<div class="rounded-shape-md bg-primary-container p-4">					<p class="text-body-md text-primary-container-foreground">						width="sm" — a column narrow enough to read comfortably, centred in whatever space the						shell has.					</p>				</div>			</AppShellContent>		</AppShellMain>	</AppShell></div>