AppShell

27 fullscreen demos

Examples

Every variant the shell supports, each one a small believable app. Each card sketches the behavior; open it to scroll the real thing.

Playground

Mix all 10 header behaviors, 4 themes, 3 speeds, 3 footer variants, both sidebar modes, and both search styles — on a phone, tablet, or desktop frame — then copy the exact code.

01

Headers

Every scroll behavior the Header supports, from pinned to multi-row reveal.

Fixed Header

The header stays pinned to the top of the viewport while content scrolls beneath it.

behavior="fixed"

Static Header

The header scrolls away naturally with the page, giving content the full viewport.

behavior="static"

Sticky Header

A single sticky bar that stays pinned — the lightest always-visible header.

behavior="sticky"

Reveal All Rows

Title and search rows tuck away on scroll down — the full header glides back the moment you scroll up.

behavior="reveal-all"

Reveal Nav Row

The slim nav bar stays pinned while the heavier rows scroll away — scroll up and it floats back with a shadow.

behavior="reveal-nav"

Reveal Search Row

Scrolling up brings back the search row, keeping discovery one gesture away.

behavior="reveal-search"

Reveal Context Row

The title row tucks away as you read and floats back on scroll up, its subtitle tracking the step you're on.

behavior="reveal-context"

Tabs Below the Header

The Tabs component docks itself below the fixed header — tablist semantics and arrow-key navigation included.

<Tabs> + <Tab>
02

Footers

Every footer variant: the tab bar, the floating action, the glass dock, and the mini bar.

Tab Bar

Five-item bottom navigation with badges that hides on scroll down and returns on scroll up.

variant="tab-bar" behavior="auto-hide"

Floating Action

An elevated pill for the primary action, with left, center, and right positioning.

variant="floating" position="center"

Liquid Glass Dock

A translucent floating dock that condenses to a pill on scroll and magnifies under the pointer.

variant="floating" + glass

Mini Bar

A slim contextual strip above the safe area — perfect for a now-playing bar.

variant="mini"
03

Layout & Navigation

Drawers, pill navigation, scroll-spy anchors, desktop dropdowns, and safe areas.

Sidebar Drawer

A slide-out drawer with backdrop, collapsible groups, and left or right placement.

side="left" | side="right"

Docked Sidebar

A persistent sidebar with search pinned at its top that collapses to an icon rail on desktop and becomes the drawer on phones.

variant="docked" collapsible topContent

Bottom Sheet

A draggable sheet with snap points floating over a map — non-modal, so the map behind stays interactive.

snapPoints={[0.4, 0.85]} modal={false}

Search, Notifications & User Menu

Tapping search opens a full search overlay seeded with what you typed; the bell and the avatar each open their own menu — never both at once.

<SearchModal> + <NotificationsMenu> + <UserMenu>

Content Header

Breadcrumbs, a title, actions, and docked tabs that stay in sync as you move between screens.

<ContentHeader breadcrumbs> + <Tabs>

Scroll Navigation

Horizontally scrollable pill tabs inside the header's search row for filtering.

<ScrollNav> in searchContent

In-Page Navigation

Anchor navigation with scroll-spy highlighting, docked below a reveal-nav header.

behavior="reveal-nav" + anchors

Desktop Navigation

HeaderNav with dropdown panels that collapses into a mobile drawer menu.

<HeaderNav> + mobileMenu

Safe Area

Visualize how AppShell pads content around notches, islands, and home indicators.

safeArea + <SafeArea edges>
04

Patterns & Theming

Component combinations and the theming system: reveal pairs, header themes, dark mode.

Combined Reveal

Category nav and search return together on scroll up, in step with an auto-hiding tab bar.

behavior="reveal-nav-search" + "auto-hide"

Nested Overlays

A drawer, a sheet, and search stacked three deep — Escape closes only the top layer, and the page never scrolls behind them.

Sidebar → BottomSheet → SearchModal

Header Themes

Cycle the header through its light, primary, dark, and unstyled themes live.

theme="light | primary | dark | none"

Dark Mode

Live theme switching with CSS custom properties across every shell component.

.dark class + tokens

Chat Composer

A group thread whose composer rides above the on-screen keyboard instead of hiding under it.

useKeyboardInset()

RTL & Arabic

The same shell in Arabic and right-to-left: labels, drawer edge, and tab order flip live.

<I18nProvider dir="rtl" labels>