App Shell

The App Shell defines the main structure of your app.

Theming#

The AppShell component is a multipart component. The styling needs to be applied to each part specifically.

To learn more about styling multipart components, visit the Chakra UI Component Style page.

Anatomy#

  • container
  • inner
  • main

Default theme#

import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'
import { appShellAnatomy } from '../../anatomy'


const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(appShellAnatomy.keys)


const baseStyle = definePartsStyle({
  container: {},
  inner: {},
  main: {},
})


export const appShellTheme = defineMultiStyleConfig({
  defaultProps: {
    variant: 'fullscreen',
  },
  variants: {
    static: {},
    fullscreen: {
      container: {
        position: 'absolute',
        inset: 0,
      },
    },
  },
  baseStyle,
})

Was this helpful?