UI App Shells Catalog

Ten full-page layout shells — classic topbar+sidebar, top-only SaaS, settings, marketing→app bridge, icon rail, workspace switcher, docs, console, inbox split, and mobile bottom nav. Compose pages, not only parts. See CATALOG.md.

.shell-classic

Classic Topbar + Sidebar

Persistent left rail + page topbar + main canvas — the default app chrome.

Overview

Wednesday cohort

Primary content sits beside a persistent shell nav with page actions in the topbar.

Bookings128
Occupancy78%
Revenue$42.8k
.shell-top-saas

Top-Only SaaS

Horizontal product nav — no sidebar. Page title and actions live in the content header.

Northstar

Dashboard

Trail openings and hut capacity for the next 14 days.

Open huts14
Guides on call9
Waitlist23
.shell-settings

Settings Shell

Back-to-app topbar, category rail, and a focused settings form panel.

← Back to app Settings

Profile

How your name and contact show on guest-facing bookings.

.shell-bridge

Marketing → App Bridge

Marketing header + hero CTA beside a live app chrome preview, then signed-in strip.

Northstar

Field ops that feel like a product, not a spreadsheet.

Compose hut bookings, crew, and guest messages in one shell your clients recognize.

Signed in as avery@harbor.studio
.shell-icon-rail

Collapsible Icon Rail

Dark rail with icon+label links; collapse toggle shrinks to icon-only.

Messages

Inbox

Collapse the rail when you need horizontal room for tables or message threads.

.shell-workspace

Workspace Switcher Shell

Org switcher in the rail, primary nav, pinned user footer, and search topbar.

Projects

Switcher + user footer keep multi-tenant IA clear without leaving the shell.

.shell-docs

Docs Content Shell

Topbar + left section nav + article column + right “On this page” TOC.

Northstar Docs

Getting started

Stand up a Harbor workspace, invite guides, and publish your first hut availability window.

1. Create a workspace

Pick a region and default timezone. Guests will see these on confirmation emails.

2. Invite your crew

Send magic-link invites. Roles: owner, guide, front desk.

.shell-console

Console / Ops Shell

Dark chrome with status strip and dense ops panels for monitoring desks.

Command center

Live
API healthy Webhooks ok 3 hut sensors delayed

Needs attention

Status strip stays above panels so operators scan health before content.

Open alerts

2 weather holds · 1 payment retry

Queue depth

Message workers at 64% capacity

.shell-inbox

Inbox Split Shell

Shared topbar, thread list rail, and detail/composer pane.

Harbor Mail
Inbox 3

Ridge hut hold

Maya Chen · 12m ago

Can we extend Friday’s hold through Sunday morning? Guests want the sunrise climb.

.shell-mobile

Mobile Bottom Nav Shell

Phone-width frame with topbar, scrollable main, and four-tab bottom bar.

≈ 390px app frame

Trips

Ridge sunrise

Sat · 6 guides · 18 guests confirmed

Lake loop day hike

Sun · weather watch · 2 spots left

Crew briefing

Tomorrow 07:30 · Harbor HQ