Applying Global Styles

Chakra UI allows developers to establish a consistent visual baseline across an application. Instead of styling each component individually, shared layout and appearance rules can be applied at the top level.

A common approach is to apply global background and text styles in the root layout component. This ensures that all screens inherit the same base styling.

// src/App.jsx
import { Box, Button, Heading, Input, Stack, Text } from "@chakra-ui/react"

export default function App() {
  return (
    <Box
      minH="100vh"
      bg="gray.50"
      color="gray.900"
      display="grid"
      placeItems="center"
      p="6"
    >
      <Box bg="white" borderWidth="1px" borderRadius="xl" p="6" w="full" maxW="420px">
        <Stack gap="4">
          <Heading size="md">Newsletter</Heading>
          <Text color="fg.muted">Get product updates once a week. No spam.</Text>
          <Input placeholder="Email address" />
          <Button colorPalette="brand">Subscribe</Button>
        </Stack>
      </Box>
    </Box>
  )
}

To illustrate how you might use global styles in Chakra UI, consider the scenario where you want to set a universal background color and define a default font family for your entire app. Chakra UI allows you to do this by extending its theme configuration. You can specify global styles within the styles object of your custom theme, which is then passed to the ChakraProvider. For example, you might set the background color to a light gray and choose a clean, modern font for all text elements. This ensures that every component inherits these base styles unless explicitly overridden, making your app visually consistent and easier to maintain.