Skip to content

Chakra UI

UI & GraphicsUI FrameworkJavaScript
Official docs ↗GitHub ↗

What it is

Chakra UI is a simple, modular, and accessible component library for React applications. It provides composable components with built-in theming, responsive styles, and accessibility support by default.

Chakra UI provides accessible React components out-of-the-box, including buttons, forms, modals, navigation, and layout primitives. Styling is done using props like `colorScheme`, `variant`, and `size` instead of writing CSS.

Installation

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Getting started

The smallest useful thing you can do with it, and what each part means.

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

<Button colorScheme="teal" size="md">Click Me</Button>
Renders a button with a teal color scheme and medium size.
Stack layout
import { Stack, Button } from '@chakra-ui/react';

<Stack direction="row" spacing={4}>
  <Button colorScheme="blue">Save</Button>
  <Button colorScheme="gray">Cancel</Button>
</Stack>
Uses a horizontal stack to space out buttons evenly.

Advanced usage

Where the library earns its place over a simpler alternative.

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

const theme = extendTheme({
  colors: { brand: { 500: '#1a365d' } }
});

function App() {
  return (
    <ChakraProvider theme={theme}>
      <Button colorScheme="brand">Brand Button</Button>
    </ChakraProvider>
  );
}
Extends the default Chakra theme with a custom color and applies it to a button.
Responsive design with props
import { Box } from '@chakra-ui/react';

<Box w={{ base: '100%', md: '50%' }} h="100px" bg="tomato" />
Sets the box width to 100% on small screens and 50% on medium and larger screens using responsive props.
Modal example
import { useDisclosure, Button, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody } from '@chakra-ui/react';

function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Chakra Modal</ModalHeader>
          <ModalCloseButton />
          <ModalBody>Hello from Chakra!</ModalBody>
        </ModalContent>
      </Modal>
    </>
  );
}
Demonstrates a modal component controlled by Chakra's useDisclosure hook.

Errors and fixes

The failures you are most likely to hit, and what actually resolves them.

Styles not applied
Ensure that your app is wrapped in `<ChakraProvider>` at the root.
Framer Motion error
Chakra UI animations require `framer-motion`. Make sure it is installed correctly.
Invalid prop warning
Check Chakra UI docs for valid prop names; some props differ from plain HTML attributes.

Best practices

  • Wrap your app in ChakraProvider to enable theme and context.
  • Use style props (`colorScheme`, `variant`, `size`, `spacing`) for quick styling instead of writing CSS.
  • Leverage responsive props to handle different screen sizes without media queries.
  • Use built-in hooks like `useDisclosure` for handling modal, drawer, and popover states.
  • Extend the theme for consistent branding instead of overriding styles individually.

Background

Why it exists, and what it was reacting to.

Chakra UI was created by Segun Adebayo in 2019 to improve the developer experience when building React applications. It emphasizes simplicity, accessibility (a11y), and a consistent design system. Chakra UI uses a style props API to make styling components intuitive and fast.

Related libraries

Others in UI & Graphics for JavaScript.

← All JavaScript librariesJavaScript guide