Chakra UI Cheat Sheet

Covers Chakra UI setup, style props, responsive syntax, built-in hooks like useDisclosure and useColorMode, and component composition.

2 PagesIntermediateMar 18, 2026

Installation & Provider

Setting up ChakraProvider and a custom theme.

javascript

// npm install @chakra-ui/react @emotion/react @emotion/styled framer-motionimport { ChakraProvider, extendTheme } from '@chakra-ui/react';const theme = extendTheme({  colors: {    brand: {      500: '#3182ce',    },  },});function App({ children }) {  return <ChakraProvider theme={theme}>{children}</ChakraProvider>;}

Style Props & Responsive Syntax

Styling components directly through props.

javascript

import { Box, Flex } from '@chakra-ui/react';<Box  p={4}                  // padding: 1rem (4 * 0.25rem scale)  bg="brand.500"  borderRadius="md"  fontSize={{ base: 'sm', md: 'lg' }} // responsive object syntax>  Hello</Box><Flex direction="row" align="center" justify="space-between" gap={2}>  <Box>Left</Box>  <Box>Right</Box></Flex>

Components & Hooks

Using built-in components with state hooks.

javascript

import { Button, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton } from '@chakra-ui/react';function Example() {  const { isOpen, onOpen, onClose } = useDisclosure();  return (    <>      <Button colorScheme="blue" onClick={onOpen}>Open</Button>      <Modal isOpen={isOpen} onClose={onClose}>        <ModalOverlay />        <ModalContent>          <ModalHeader>Title</ModalHeader>          <ModalCloseButton />          <ModalBody>Content</ModalBody>        </ModalContent>      </Modal>    </>  );}

Core Concepts

Key patterns for theming and composition.

useColorMode()- returns and toggles the current color mode, either light or dark
useColorModeValue(light, dark)- picks a value based on the current color mode
colorScheme prop- applies a themed color palette to interactive components, e.g. teal or red
as prop- polymorphic rendering; pass an element or component type to render the component as that underlying element while keeping its styling
Stack / HStack / VStack- flex layout primitives with automatic, consistent spacing between children
theme tokens- space, colors, and radii scales referenced by shorthand props such as p, m, bg, and rounded

Pro Tip

Call useColorModeValue inside components instead of writing manual CSS media queries for dark mode: it re-renders automatically when useColorMode toggles, keeping light and dark styling colocated with the component logic.

Was this cheat sheet helpful?

Material UI Cheat Sheet

Webpack Cheat Sheet