App Shell

The App Shell defines the main structure of your app.

Import#

  • AppShell: The container component that manages composition.
import { AppShell } from '@saas-ui/react'

Usage#

A shell is a collection of components shared throughout your app and can consist of a header, sidebar, content aside, and footer.

To make sure AppShell fills up the entire viewport height, you can set height="$100vh" on the AppShell to make it fill the entire viewport height.

Basic shell#

AppShell will try to fit it's parent with position absolute and inset: 0 by default.

Live edit

Variants#

The default variant is fullscreen, using the static variant the AppShell will behave like a regular flex box. Use the static variant when the AppShell needs a fixed height, or when using a sticky header / sidebar.

Live edit

Example layout#

Full example with Sidebar, Page Pro and DataGrid Pro

Live edit

Was this helpful?