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.

import { Box } from '@chakra-ui/react'
import {
  AppShell,
  Sidebar,
  SidebarSection,
  NavItem,
  Navbar,
  NavbarBrand,
  NavbarContent,
  NavbarItem,
  SearchInput,
} from '@saas-ui/react'

export default function Page() {
  return (
    <AppShell
      navbar={
        <Navbar borderBottomWidth="1px" position="sticky" top="0">
          <NavbarBrand>
            <SaasUILogo width="100px" />
          </NavbarBrand>
          <NavbarContent justifyContent="flex-end">
            <NavbarItem>
              <SearchInput size="sm" />
            </NavbarItem>
          </NavbarContent>
        </Navbar>
      }
      sidebar={
        <Sidebar>
          <SidebarSection>
            <NavItem>Home</NavItem>
            <NavItem>Settings</NavItem>
          </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. Use the static variant when the AppShell needs a fixed height, or when using a sticky header / sidebar.

import { Box } from '@chakra-ui/react'
import {
  AppShell,
  Sidebar,
  SidebarSection,
  NavItem,
  Navbar,
  NavbarBrand,
  NavbarContent,
  NavbarItem,
  SearchInput,
} from '@saas-ui/react'

export default function Page() {
  return (
    <AppShell
      variant="static"
      minH="$100vh"
      navbar={
        <Navbar borderBottomWidth="1px" position="sticky" top="0">
          <NavbarBrand>
            <SaasUILogo width="100px" />
          </NavbarBrand>
          <NavbarContent justifyContent="flex-end">
            <NavbarItem>
              <SearchInput size="sm" />
            </NavbarItem>
          </NavbarContent>
        </Navbar>
      }
      sidebar={
        <Sidebar position="sticky" top="56px" toggleBreakpoint="sm">
          <SidebarSection>
            <NavItem>Home</NavItem>
            <NavItem>Settings</NavItem>
          </SidebarSection>
        </Sidebar>
      }
    >
      <Box as="main" flex="1" py="2" px="4">
        Your application content
      </Box>
    </AppShell>
  )
}

Example layout#

Full example with Sidebar, Page Pro and DataGrid Pro

import {
  Box,
  Spacer,
  Button,
  IconButton,
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
} from '@chakra-ui/react'
import {
  AppShell,
  Sidebar,
  SidebarSection,
  NavItem,
  PersonaAvatar,
} from '@saas-ui/react'
import {
  Page,
  PageHeader,
  PageBody,
  DataGrid,
  DataGridPagination,
} from '@saas-ui-pro/react'
import { FiHome, FiUsers } from 'react-icons/fi'

export default function Page() {
  return (
    <AppShell
      sidebar={
        <Sidebar width="30%" toggleBreakpoint="sm">
          <SidebarSection direction="row">
            <SaasUILogo width="100px" />
            <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 icon={<FiHome size="1.2em" />}>Home</NavItem>
            <NavItem icon={<FiUsers size="1.2em" />}>Contacts</NavItem>
          </SidebarSection>
        </Sidebar>
      }
    >
      <Page>
        <PageHeader title="Users" />
        <PageBody p="0">
          <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>
        </PageBody>
      </Page>
    </AppShell>
  )
}

Was this helpful?