App Shell

The App Shell defines the main structure of your app.

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

Import#

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

Usage#

The AppShell is currently in beta, we'd love to hear your feedback while we finalize the API. Please note that you need to import the components from @saas-ui/app-shell instead of @saas-ui/react while in beta.

Basic shell#

AppShell will try to fit it's parent with position absolute and inset: 0 by default. You may need to set height: 100% on the html and body, or alternatively set height: 100vh on the AppShell to make it fit the entire browser viewport.

<AppShell
variant="static"
navbar={
<Box as="header" borderBottomWidth="1px" py="2" px="4">
<SaasUILogo width="100px" />
</Box>
}
sidebar={
<Sidebar height="200px">
<SidebarSection>
<NavItem label="Home" />
<NavItem label="Settings" />
</SidebarSection>
</Sidebar>
}
>
<Box as="main" flex="1" py="2" px="4" overflowY="auto">
Your application content
</Box>
</AppShell>

Variants#

The default variant is fullscreen, using the static variant the AppShell will behave like a regular flex box.

<AppShell
variant="static"
height="240px"
navbar={
<Box as="header" borderBottomWidth="1px" py="2" px="4">
<SaasUILogo width="100px" />
</Box>
}
sidebar={
<Sidebar>
<SidebarSection>
<NavItem label="Home" />
<NavItem label="Settings" />
</SidebarSection>
</Sidebar>
}
>
<Box as="main" flex="1" py="2" px="4" overflowY="auto">
Your application content
</Box>
</AppShell>

Example layout#

<AppShell
variant="static"
sidebar={
<Sidebar width="30%" height="400px">
<SidebarSection direction="row">
<SaasUIGlyph width="24px" />
<Spacer />
<Menu>
<MenuButton
as={IconButton}
icon={
<PersonaAvatar
presence="online"
size="xs"
src="/showcase-avatar.jpg"
/>
}
variant="ghost"
/>
<MenuList>
<MenuItem>Sign out</MenuItem>
</MenuList>
</Menu>
</SidebarSection>
<SidebarSection flex="1" overflowY="auto">
<NavItem label="Home" icon={<FiHome />} />
<NavItem label="Contacts" icon={<FiUsers />} />
</SidebarSection>
</Sidebar>
}
>
<Page title="Page" contentWidth="full">
<DataGrid
isHoverable
isSelectable
isSortable
columns={[
{ id: 'name', Header: 'Name' },
{ id: 'role', Header: 'Role' },
{ id: 'actions', width: '100px', Cell: () => <Button>Edit</Button> },
]}
data={[{ name: 'Renata Alink', role: 'Founder' }]}
>
<DataGridPagination />
</DataGrid>
</Page>
</AppShell>

Props#

The AppShell component and all sub components accept all Box properties.

Was this helpful?