App Shell
The App Shell defines the main structure of your app.
Source
Theme source
@saas-ui/core
- 2.11.4 (latest)
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?