Page

Page makes it easy to implement consistent page layouts throughout your app.

Theming#

The Page 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
  • headerContainer
  • header
  • heading
  • headerFooter
  • title
  • description
  • body

Theming utilities#

  • createMultiStyleConfigHelpers: a function that returns a set of utilities for creating style configs for a multipart component (definePartsStyle and defineMultiStyleConfig).
  • definePartsStyle: a function used to create multipart style objects.
  • defineMultiStyleConfig: a function used to define the style configuration for a multipart component.
import { pageAnatomy } from '@saas-ui-pro/react/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/react'


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

Was this helpful?