Chakra UI

Language: JavaScript

UI Framework

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.

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.

Installation

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

yarn: yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

cdn: Chakra UI does not provide an official CDN build; use npm or yarn for installation.

manual: Install the package from npm and wrap your app with ChakraProvider to enable theming.

Usage

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.

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.

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.

Error Handling

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.

Official Docs Github