Back to Components

App Shell

Page Shells

Full-page app shell with top IconNavBar navigation, content area, and footer

Desktop · 12/12 cols · 1024px

Description

Standard app shell layout with a centered top navigation bar using IconNavBar, a flexible content area with responsive grid, and a minimal footer. Suitable for SaaS apps, content platforms, and general web applications.

Component Info

ID
app-shell
Slug
/components/app-shell
Category
Page Shells
Status
Stable

Based on Primitives

IconNavBar

Import

import { AppShellLayout } from "@/patterns/layouts";

Usage

<AppShellLayout />

Use When

  • standard app with top navigation
  • SaaS web application
  • content-focused platform

Avoid When

  • dashboard with sidebar navigation
  • auth/login pages
  • landing/marketing pages

Keywords

appshelllayoutpagetop-navnavigation