REACT Chakra UI

Chakra UI is a modern, accessible, and highly customizable component library for React applications. It provides a set of composable and themeable UI components that follow best practices for accessibility and responsiveness.

1. Install Chakra UI in a React Project

You can install Chakra UI using npm or yarn:

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

Wrap Your App with ChakraProvider

To use Chakra UI components, wrap your app with ChakraProvider in index.js or App.js:

import React from "react";
import ReactDOM from "react-dom";
import { ChakraProvider } from "@chakra-ui/react";
import App from "./App";

ReactDOM.render(
  <ChakraProvider>
    <App />
  </ChakraProvider>,
  document.getElementById("root")
);

2. Basic Example Using Chakra UI

Here’s a simple example using a Button component from Chakra UI:

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

const App = () => {
  return (
    <div>
      <Button colorScheme="blue" size="lg">Click Me</Button>
    </div>
  );
};

export default App;
  • colorScheme="blue" sets the button theme color.
  • size="lg" makes the button larger.

3. Common Chakra UI Components

Chakra UI provides a variety of built-in components to simplify UI development.

Text & Heading

import { Text, Heading } from "@chakra-ui/react";

<Heading size="xl">This is a Heading</Heading>
<Text fontSize="lg" color="gray.600">This is some text.</Text>

Container & Box

import { Box, Container } from "@chakra-ui/react";

<Container maxW="container.md">
  <Box p={4} bg="blue.500" color="white">This is a box</Box>
</Container>
  • Container centers content.
  • Box is a flexible div with built-in padding and colors.

Flexbox & Grid

import { Flex, Grid, GridItem } from "@chakra-ui/react";

<Flex justify="center" align="center" height="100vh" bg="gray.100">
  <Box p={5} bg="white" shadow="md">Flexbox Example</Box>
</Flex>

<Grid templateColumns="repeat(3, 1fr)" gap={4}>
  <GridItem w="100%" h="100px" bg="blue.200" />
  <GridItem w="100%" h="100px" bg="green.200" />
  <GridItem w="100%" h="100px" bg="red.200" />
</Grid>
  • Flex makes it easy to align items.
  • Grid provides a responsive layout.

Input & Form Components

import { Input, FormControl, FormLabel } from "@chakra-ui/react";

<FormControl>
  <FormLabel>Email address</FormLabel>
  <Input type="email" placeholder="Enter your email" />
</FormControl>

Card (Using Box & Stack)

import { Box, Text, Stack } from "@chakra-ui/react";

<Box p={5} shadow="md" borderWidth="1px">
  <Stack spacing={3}>
    <Text fontSize="lg">This is a Card</Text>
    <Text color="gray.500">Some description here.</Text>
  </Stack>
</Box>

Modal (Dialog Box)

import { useState } from "react";
import { Button, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter } from "@chakra-ui/react";

const MyModal = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Modal Title</ModalHeader>
          <ModalBody>This is a modal</ModalBody>
          <ModalFooter>
            <Button colorScheme="blue" onClick={() => setIsOpen(false)}>Close</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
};

export default MyModal;
  • isOpen controls visibility.
  • ModalOverlay adds a background blur.

Drawer (Sidebar Navigation)

import { useState } from "react";
import { Drawer, DrawerOverlay, DrawerContent, DrawerHeader, DrawerBody, Button } from "@chakra-ui/react";

const MyDrawer = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} placement="left">
        <DrawerOverlay />
        <DrawerContent>
          <DrawerHeader>Drawer Menu</DrawerHeader>
          <DrawerBody>
            <p>Item 1</p>
            <p>Item 2</p>
          </DrawerBody>
        </DrawerContent>
      </Drawer>
    </>
  );
};

export default MyDrawer;

Toast Notifications

import { useToast, Button } from "@chakra-ui/react";

const MyToast = () => {
  const toast = useToast();

  return (
    <Button onClick={() => toast({ title: "Success!", status: "success", duration: 3000 })}>
      Show Toast
    </Button>
  );
};

export default MyToast;
  • status="success" changes the color.
  • duration=3000 hides the toast after 3 seconds.

 

4. Customizing Chakra UI Theme

You can create a custom theme and provide it globally using extendTheme:

import { extendTheme, ChakraProvider } from "@chakra-ui/react";

const theme = extendTheme({
  colors: {
    brand: {
      100: "#f7c948",
      200: "#f0b429",
    },
  },
});

const App = () => {
  return (
    <ChakraProvider theme={theme}>
      <Button colorScheme="brand">Custom Themed Button</Button>
    </ChakraProvider>
  );
};

export default App;
  • Custom colors are now accessible as colorScheme="brand".

5. Responsive Design with Chakra UI

Chakra UI makes responsive design easy using array notation:

<Text fontSize={["sm", "md", "lg", "xl"]}>Responsive Text</Text>
  • On small screens, font size is sm. On medium screens, it’s md, and so on.

6. Animations with Chakra UI

Chakra UI supports Framer Motion for animations:

import { motion } from "framer-motion";
import { Box } from "@chakra-ui/react";

const MotionBox = motion(Box);

<MotionBox animate={{ scale: 1.2 }} transition={{ duration: 0.5 }} bg="blue.300" p={4}>
  Animated Box
</MotionBox>;

7. Deploying a Chakra UI React App

After building your Chakra UI app, deploy it using:

  • Vercel (vercel deploy)
  • Netlify (npm run build → Upload build folder)
  • GitHub Pages (npm run build → gh-pages deployment)