Stop 13 · UI LibrariesTopics · 3/7

Chakra UI

In short

Chakra UI lets you style components with props like p="4" and bg="teal.500". If you like writing layout quickly without leaving JSX, it feels very natural.

A React component library focused on accessibility and a simple, style-prop-based theming API for rapidly building consistent UIs.

The jaadu snaps together big colourful toy bricks into a little house.

Think of it like this

LEGO with labelled bricks

Every LEGO brick snaps into every other one, and each comes in standard sizes. Chakra's Box, Stack and Flex are those bricks. You snap them together and set size and colour right on the brick.

Watch it happen

From style prop to CSS

Style prop

Theme token

Breakpoint

CSS class

Screen

1/5You write p={{ base: "4", md: "8" }} on a Box instead of writing a CSS file.

The big ideas

What you need to know

Style props

Instead of className, you pass styles as props: p, m, bg, color, rounded. They map to theme tokens.

Responsive in one prop

Write p={{ base: "2", md: "6" }} and the padding changes at the md breakpoint.

Accessible by default

Modals trap focus, menus work with arrow keys, and components ship with the right ARIA attributes.

Check your version

Chakra v3 changed a lot from v2, like colorPalette replacing colorScheme. Match tutorials to your installed version.

See it in code

Walk through the code

tsx

1// Chakra UI v32import { ChakraProvider, defaultSystem, Box, Stack, Heading, Button } from "@chakra-ui/react";3 4export default function App() {5  return (6    <ChakraProvider value={defaultSystem}>7      <Box p={{ base: "4", md: "8" }} bg="gray.50" rounded="lg">8        <Stack gap="3">9          <Heading size="lg">Hostel Mess Menu</Heading>10          <Button colorPalette="teal">See today's lunch</Button>11        </Stack>12      </Box>13    </ChakraProvider>14  );15}

1/3Everything comes from @chakra-ui/react, including the default design system.

All spacing and colour values come from the theme, so 4 and teal stay consistent across the app. Install @chakra-ui/react and @emotion/react first.

Save yourself the pain

Common mistakes

Oops

Copying a v2 tutorial that uses colorScheme and extendTheme into a v3 app.

Do this instead

v3 uses colorPalette and createSystem. Check the version in package.json, then read matching docs.

Oops

Writing raw pixel values everywhere, like p="13px".

Do this instead

Stick to theme tokens like p="3". Your spacing stays consistent and easy to change.

Your mission

Build a responsive profile card

~25 min

Quick check

In Chakra, what does p={{ base: "2", md: "6" }} do?

Go deeper

1Build a small form using Chakra's layout and input components.
2Learn its style-prop system, e.g. `<Box p={4} bg="gray.100">`.
3Try switching between Chakra's light and dark color modes.