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
Multi-Part Component Theming
Extending a multi-part component's style config with variants, sizes, and default props.
javascript
import { extendTheme } from '@chakra-ui/react';import { menuAnatomy } from '@chakra-ui/anatomy';import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(menuAnatomy.keys);const subtle = definePartsStyle({ list: { bg: 'gray.700', border: 'none' }, item: { color: 'white', _hover: { bg: 'gray.600' } },});const menuTheme = defineMultiStyleConfig({ variants: { subtle }, defaultProps: { variant: 'subtle' },});const theme = extendTheme({ components: { Menu: menuTheme },});
Custom Single-Part Component Style
Registering a brand-new component (not from Chakra) into the theme system via styleConfig.
javascript
// theme/components/badge-pill.jsconst BadgePill = { baseStyle: { fontWeight: 'bold', borderRadius: 'full', textTransform: 'uppercase', }, sizes: { sm: { fontSize: 'xs', px: 2, py: 0.5 }, md: { fontSize: 'sm', px: 3, py: 1 }, }, variants: { solid: (props) => ({ bg: `${props.colorScheme}.500`, color: 'white', }), }, defaultProps: { size: 'md', variant: 'solid', colorScheme: 'purple' },};export default BadgePill;// usage: useStyleConfig('BadgePill', props) inside a custom component
forwardRef + chakra() Factory
Wrapping a third-party component so it accepts Chakra style props while forwarding refs correctly.
javascript
import { chakra, forwardRef } from '@chakra-ui/react';import ReactDatePicker from 'react-datepicker';const StyledDatePicker = chakra(ReactDatePicker, { shouldForwardProp: (prop) => ['selected', 'onChange', 'className'].includes(prop),});const CustomInput = forwardRef((props, ref) => ( <chakra.input ref={ref} {...props} borderRadius="md" borderColor="gray.300" />));
Reading Theme Tokens as CSS Variables
Using the useToken hook and semantic tokens for values that must cross into raw CSS or canvas APIs.
javascript
import { useToken } from '@chakra-ui/react';function Chart() { const [brand500, gray200] = useToken('colors', ['brand.500', 'gray.200']); // brand500 -> '#3182ce' resolved value, usable in <canvas> or SVG return <canvas data-line-color={brand500} data-grid-color={gray200} />;}// semantic tokens: adapt automatically to color modeconst theme = extendTheme({ semanticTokens: { colors: { 'chakra-body-bg': { _light: 'white', _dark: 'gray.800' }, 'surface.card': { default: 'gray.50', _dark: 'gray.700' }, }, },});
Advanced APIs & Escape Hatches
Lesser-known hooks and utilities for fine-grained control beyond basic style props.
- useMultiStyleConfig()- retrieves the resolved parts style object for a multi-part component, used when building custom compound components
- useTheme()- returns the full resolved theme object, including breakpoints and raw tokens, for use in JS logic outside of style props
- sx prop- accepts a raw style object with full CSS-in-JS power (pseudo-selectors, nested selectors) beyond the flat style-prop API
- __css prop- lowest-level style injection point with the highest override priority, used internally by Chakra's own components
- ChakraProvider resetCSS- toggles whether Chakra injects its CSS reset; set to false when composing with another design system to avoid style conflicts
- toast()- imperative notification API returned by useToast(), supports custom render functions and update()/close() by id
- ColorModeScript- inline script placed in _document/root layout to set the color mode class before hydration, preventing a flash of incorrect theme
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?
Explore Topics
#ChakraUI#ChakraUICheatSheet#WebDevelopment#Intermediate#InstallationProvider#Style#Props#Responsive#CheatSheet#SkillVeris
