order
AppShell
Sidebar, top bar, content and a detail panel in one frame.
Studio workspaceRail sidebar, project page and a task panel; both sides collapse
Project
Harbour rebrand
Draft launch checklist
Research
PNIcon audit
Design
MCHarbour homepage
Design
MCToday
7 tasks due
TodayProjectsCalendarMore
Calendar
Crew interview 11, 11:30
In context
On a phoneThe mobile variant: a top bar, the page and a real tab bar
TodayProjectsCalendarPeopleMore
Projects
Harbour rebrand
On track
Tideline mobile
Review
Crew interviews
Late
4 people, 5 projects.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
sidebar | SidebarNavProps | undefined | No | — |
topNav | NavBarProps | undefined | No | — |
railSidebar | SidebarNavProps | undefined | No | — |
tabBar | MobileTabBarProps | undefined | No | — |
rightPanel | SidePanelProps | undefined | No | — |
children | ReactNode | Yes | — |
variant | "sidebar" | "top-nav" | "top-nav-sidebar" | "three-pane" | "mobile" | "tablet" | undefined | No | sidebar |
height | string | undefined | No | 100vh |
Variants
"sidebar" (default), "top-nav", "top-nav-sidebar", "three-pane" (an icon rail beside a sidebar), "mobile" (a top bar and a real MobileTabBar) and "tablet" (the sidebar collapsed to a rail by default). rightPanel is a real SidePanel and composes with any of them.
When not to use it
Not for embedded widgets or pages that scroll naturally: AppShell owns the full viewport (height: 100vh by default) so every nav element reaches the edge.