Chakra UI: Setup, Style Props & Theming

Chakra UI is a React component library built around accessibility (WAI-ARIA compliant by default), composability, and a style-prop-driven theming system. Chakra v2 and earlier are built on Emotion's CSS-in-JS runtime; v3 moved to Panda CSS's build-time styling -- an important version distinction when following setup docs.

Setup & Theming

import { ChakraProvider, extendTheme } from '@chakra-ui/react';

// Centralized design tokens -- merged with Chakra's default theme
const theme = extendTheme({
  colors: {
    brand: { 500: '#0ea5e9', 600: '#0284c7' },
  },
  components: {
    // Reusable, named component variant -- Button variant="danger"
    // applies this consistently everywhere, instead of repeating
    // the same style props at every usage site
    Button: {
      variants: {
        danger: { bg: 'red.500', color: 'white', _hover: { bg: 'red.600' } },
      },
    },
  },
  // Resolves to a different concrete value per color mode -- reference
  // bg.canvas once instead of useColorModeValue(...) everywhere
  semanticTokens: {
    colors: {
      'bg.canvas': { default: 'white', _dark: 'gray.800' },
    },
  },
});

function App() {
  return (
    <ChakraProvider theme={theme}>
      <YourApp />
    </ChakraProvider>
  );
}

Style Props

import { Box, Button } from '@chakra-ui/react';

// Box is the foundational styled-div primitive -- Flex/Grid/Stack
// all build on top of it
<Box p={4} bg="brand.500" color="white" borderRadius="md">
  Content
</Box>

// p={4} resolves against the theme's spacing scale, not literally 4px

// Responsive object syntax -- base (mobile-first), then breakpoint overrides
<Box width={{ base: '100%', md: '50%' }}>Responsive width</Box>

<Button variant="danger" as="a" href="/delete">Delete</Button>
// as="a" -- polymorphic rendering, Chakra styling + real <a> element
// (or as={Link} for a router component, handling client-side nav)

Dark Mode

import { useColorMode, useColorModeValue } from '@chakra-ui/react';

function ThemeToggle() {
  const { colorMode, toggleColorMode } = useColorMode();
  const bg = useColorModeValue('white', 'gray.800');

  return (
    <Box bg={bg}>
      <Button onClick={toggleColorMode}>
        {colorMode === 'light' ? 'Dark' : 'Light'} mode
      </Button>
    </Box>
  );
}

// ColorModeScript in the document head avoids a flash of the wrong
// theme on initial page load, and persists the user's choice