Cascade Layers

Chakra UI relies on CSS cascade layers to provide a predictable, performant way to override components. The layers are defined to match that of Panda CSS.

Layer Types

Chakra supports these cascade layer types:

• @layer reset: Where the preflight or css resets styles are defined.

• @layer base: Where global styles are placed when defined in globalCss config property.

• @layer recipes: Where styles for recipes are placed when defined in theme.recipes or theme.slotRecipes

• @layer tokens: Where styles for design tokens are placed when defined in theme.tokens or theme.semanticTokens

Layer Order

Chakra appends the following layers to the top of the generated emotion stylesheet:

@layer reset, base, tokens, recipes;

This structure allows for smoother experience when combining Chakra and Panda CSS in the same project.

Disabling Layers

Cascade layers are enabled by default. If you want to disable them, you can do so by setting the disableLayers option to true

export const system = createSystem(defaultConfig, {
  disableLayers: true,
})

Next, edit the components/ui/provider file to use the new system

import { ColorModeProvider } from "@/components/ui/color-mode"
import { ChakraProvider } from "@chakra-ui/react"
import { system } from "./theme"

export function Provider(props: React.PropsWithChildren) {
  return (
    <ChakraProvider value={system}>
      <ColorModeProvider>{props.children}</ColorModeProvider>
    </ChakraProvider>
  )
}