Navigation
Where to Use App Shell in React Apps
App Shell is a full layout with sidebar navigation, mobile drawer, and scrollable main content. Product teams ship it when every authenticated route needs a consistent frame instead of reinventing chrome per page.
Where teams use App Shell
Use case 1
SaaS authenticated layout
Wrap dashboard routes with sidebar, drawer, and main scroll. Keeps navigation IA stable as features grow.
Use case 2
Internal admin portal
Ops tools reuse the shell for users, billing, and flags. Mobile drawer covers phone on-call access.
Use case 3
Docs-plus-app hybrid
Product-led docs sit beside app pages in the same shell. Scrollable main isolates content from sticky nav.
Use case 4
Partner console
ISV partner portals get branded chrome quickly. Shell boundaries make it obvious what is navigation versus page body.
Who it is for
Frontend architects establishing the primary authenticated layout for React apps.
Try App Shell on AkmanOS
Resize to feel the mobile drawer in the preview, then copy markdown into Claude or Cursor to scaffold App Shell around your routes.
Preview /preview/app-shellMore in Navigation
- Mailbox ShellThree-column mail app — folder rail, searchable thread list, reading pane, and compose overlay. Explore real product surfaces for the Mailbox Shell component — then open the live AkmanOS preview and copy production-ready source.
- NavbarCard-style top nav with mega menus, featured panels, and mobile drawer. Explore real product surfaces for the Navbar component — then open the live AkmanOS preview and copy production-ready source.
- Navbar FloatingGlass pill navbar with centered mega-menu rail, lime CTA, and blur shell. Explore real product surfaces for the Navbar Floating component — then open the live AkmanOS preview and copy production-ready source.
- SidebarNavigation sidebar with logo, workspace switcher, expandable pages, and profile menu. Explore real product surfaces for the Sidebar component — then open the live AkmanOS preview and copy production-ready source.