Global CSS

Learn how to customize global CSS in Chakra UI

info

Please read the overview first to learn how to properly customize the styling engine, and get type safety.

Customize

Add global styles

Here's an example of how to customize the global CSS in Chakra UI.

theme.ts

import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

const customConfig = defineConfig({
  globalCss: {
    "*::placeholder": {
      opacity: 1,
      color: "fg.subtle",
    },
    "*::selection": {
      bg: "green.200",
    },
  },
})

export const system = createSystem(defaultConfig, customConfig)

Remove global CSS

If you don't need global CSS, you can remove it by destructuring the globalCss property from the default config.

theme.ts

import { createSystem, defaultConfig } from "@chakra-ui/react"

const { globalCss: _, ...restConfig } = defaultConfig
export const system = createSystem(restConfig)

Update provider

After customizing the global CSS, make sure to update your provider component to use the new system.

components/ui/provider.tsx

"use client"

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

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

CSS Variables

Recipes