Astryx Design System

Usage

The outermost layout for an application. Provides slots for top navigation, side navigation, banners, and main content. Use it as the root wrapper for every page. It handles responsive mobile navigation and skip-to-content automatically. Configure side nav collapse on SideNav with its collapsible prop.

ts
import {AppShell} from '@astryxdesign/core/AppShell'

Best practices

Guidance	Practices
Do	Choose the right height: use "fill" for dashboards with internal scrolling and "auto" for pages that grow with content.
Do	Set `contentPadding` based on content type: 4 for forms and settings, 0 for tables and dashboards.
Don't	Nest one AppShell inside another; it's the outermost layout frame.
Don't	Use for sub-page layouts; use Layout for content areas within AppShell.

Examples

Common configurations, variations, and states.

AppShell — Content Only

Minimal shell with no navigation, useful for full-bleed pages, auth screens, or embedded views.

AppShell — Side Nav Only

App shell with SideNav header providing app identity, no TopNav needed.

AppShell — Top Nav Only

Simple layout with TopNav and no side navigation, suitable for landing pages.

AppShell — Top Nav with Side Nav

The most common layout with TopNav for app identity and SideNav for page-level navigation.

AppShell — With Banner

Full layout with TopNav, SideNav, and a dismissable info banner between the nav and content.