App Shell
An app shell is the small frame that stays while page content changes. It usually holds navigation, identity, and status.
Another example
Opening Projects changes the route content. The workspace header and navigation stay in place.
Main parts
- 01Persistent header
- 02Primary navigation
- 03Route outlet
- 04Account context
- 05Page loading boundary
Use it when
Use it when many app pages share the same top-level navigation and account context.
Do not use it when
Do not put every feature in the shell. Keep page data and page-specific loading inside the page.
Name used in code
persistent header + navigation + route outlet + page state Before you ship
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Use or define App Shell to make the visual experience clear and easy to use. User context: Opening Projects changes the route content. The workspace header and navigation stay in place. Design concept to apply: App Shell. Why it fits: Use it when many app pages share the same top-level navigation and account context. Do not use it when: Do not put every feature in the shell. Keep page data and page-specific loading inside the page. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): No single official standard controls the whole term. Its meaning may change across teams, platforms, or frameworks. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Check this request
Review the current use of App Shell. Definition: An app shell is the small frame that stays while page content changes. It usually holds navigation, identity, and status. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, report the evidence you found, gaps, severity, and the smallest safe fix.