XDS — Design System

AppShell@xds/core v0.0.13 · XDSAppShell

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 collapse, skip-to-content, and mobile navigation automatically.

ts
import {XDSAppShell} from '@xds/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.