Chakra UI React Component Library

Building modern web applications requires speed, accessibility, and a consistent design language. I have worked with almost every UI library available in the ecosystem.

I remember the days of writing thousands of lines of custom CSS just to get a modal window to look right on mobile devices.

Then I discovered Chakra UI, and it completely changed how I approach frontend development. It is a simple, modular, and accessible component library that gives you the building blocks to build React applications with ease.

In this tutorial, I will show you exactly how to leverage Chakra UI to build professional interfaces quickly.

Chakra UI Library

Most libraries force you to follow their design strictly, making it hard to create something unique.

Chakra UI is different because it is built on top of Styled System, allowing for incredible flexibility through style props.

It also comes with built-in support for Dark Mode, which is a requirement for most US-based SaaS products today.

Another reason I stick with it is the accessibility; every component follows WAI-ARIA standards out of the box.

How to Install Chakra UI in Your React Project

Before we dive into the components, we need to set up the environment correctly. I usually use npm or yarn, depending on the client’s existing infrastructure.

Open your terminal in your project directory and run the following command:

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

Once the installation is complete, you must wrap your application with the ChakraProvider.

This is a step I’ve seen many junior developers miss, leading to unstyled components.

Go to your src/index.js or src/main.jsx file and set it up like this:

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </React.StrictMode>
);

1. Create a Responsive Financial Dashboard Card

In the US market, fintech and data-heavy applications are everywhere.

I often use Chakra UI’s Box and Stack components to create clean, responsive data displays.

Here is a full example of a “Portfolio Summary” card that works perfectly on both desktop and mobile.

import React from 'react';
import { 
  Box, 
  Text, 
  Stack, 
  Stat, 
  StatLabel, 
  StatNumber, 
  StatHelpText, 
  StatArrow, 
  Badge 
} from '@chakra-ui/react';

const PortfolioCard = () => {
  return (
    <Box 
      p={6} 
      maxW="400px" 
      borderWidth="1px" 
      borderRadius="lg" 
      overflow="hidden" 
      bg="white" 
      boxShadow="xl"
    >
      <Stack spacing={4}>
        <Box display="flex" justifyContent="space-between" alignItems="center">
          <Badge colorScheme="green" variant="subtle" px={2}>
            Market Open
          </Badge>
          <Text fontSize="sm" color="gray.500">Nasdaq: AAPL</Text>
        </Box>

        <Stat>
          <StatLabel fontSize="lg" fontWeight="bold">Total Investment Value</StatLabel>
          <StatNumber fontSize="3xl">$124,592.00</StatNumber>
          <StatHelpText>
            <StatArrow type="increase" />
            5.2% since last month
          </StatHelpText>
        </Stat>

        <Text fontSize="xs" color="gray.400">
          Last updated: January 23, 2026, at 10:45 AM EST
        </Text>
      </Stack>
    </Box>
  );
};

export default PortfolioCard;

You can refer to the screenshot below to see the output.

I used Stat components here because they provide a semantic way to display financial data.

The p={6} and maxW=”400px” are shorthand props for padding and max-width, which save a lot of time.

2. Customize Your Theme for US Brand Guidelines

Most of my US clients have specific brand colors that aren’t in the default Chakra palette. I found that the best way to handle this is by creating a custom theme file.

Instead of overriding styles everywhere, you define them once in a theme.js file.

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

const theme = extendTheme({
  colors: {
    brand: {
      50: '#e3f2fd',
      100: '#bbdefb',
      500: '#2196f3', // Primary brand color (e.g., Liberty Blue)
      900: '#0d47a1',
    },
  },
  fonts: {
    heading: `'Inter', sans-serif`,
    body: `'Roboto', sans-serif`,
  },
});

export default theme;

You can refer to the screenshot below to see the output.

Then, pass this theme to your ChakraProvider in the root file. This approach ensures that your “Purchase” buttons always match the corporate identity.

3. Build a Shipping Address Form for US E-commerce

Forms are the backbone of most web applications. I’ve built countless checkout flows, and Chakra’s FormControl makes validation styling a breeze.

Here is a full address form example tailored for a US-based shipping service.

import React, { useState } from 'react';
import {
  VStack,
  FormControl,
  FormLabel,
  Input,
  Select,
  Button,
  SimpleGrid,
  Heading,
  useToast
} from '@chakra-ui/react';

const ShippingForm = () => {
  const toast = useToast();
  const [loading, setLoading] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    setLoading(true);
    
    // Simulating an API call to a logistics provider
    setTimeout(() => {
      setLoading(false);
      toast({
        title: "Address Verified.",
        description: "Your shipment to New York is ready.",
        status: "success",
        duration: 4000,
        isClosable: true,
      });
    }, 1500);
  };

  return (
    <VStack 
      as="form" 
      onSubmit={handleSubmit} 
      spacing={5} 
      p={8} 
      borderWidth="1px" 
      borderRadius="md" 
      maxW="600px" 
      m="auto"
    >
      <Heading size="md" alignSelf="flex-start">Shipping Information</Heading>
      
      <FormControl isRequired>
        <FormLabel>Full Name</FormLabel>
        <Input placeholder="John Doe" />
      </FormControl>

      <FormControl isRequired>
        <FormLabel>Street Address</FormLabel>
        <Input placeholder="123 Wall Street" />
      </FormControl>

      <SimpleGrid columns={2} spacing={4} w="full">
        <FormControl isRequired>
          <FormLabel>City</FormLabel>
          <Input placeholder="New York" />
        </FormControl>

        <FormControl isRequired>
          <FormLabel>State</FormLabel>
          <Select placeholder="Select state">
            <option value="NY">New York</option>
            <option value="CA">California</option>
            <option value="TX">Texas</option>
            <option value="FL">Florida</option>
          </Select>
        </FormControl>
      </SimpleGrid>

      <FormControl isRequired>
        <FormLabel>ZIP Code</FormLabel>
        <Input placeholder="10005" maxLength={5} />
      </FormControl>

      <Button 
        colorScheme="blue" 
        width="full" 
        type="submit" 
        isLoading={loading}
      >
        Calculate Shipping Rate
      </Button>
    </VStack>
  );
};

export default ShippingForm;

You can refer to the screenshot below to see the output.

In this code, I used SimpleGrid to handle the City and State layout. Using isLoading on the button is a small detail, but it significantly improves the user experience.

4. Handle Dark Mode and Light Mode

One of the most requested features I get from users is a “Dark Mode” toggle. Chakra UI makes this incredibly easy with the useColorMode hook.

I usually place a toggle in the top navigation bar of the application.

import React from 'react';
import { Box, Button, useColorMode, Text, useColorModeValue } from '@chakra-ui/react';
import { SunIcon, MoonIcon } from '@chakra-ui/icons';

const Navbar = () => {
  const { colorMode, toggleColorMode } = useColorMode();
  
  // Custom colors for light and dark modes
  const bgColor = useColorModeValue('gray.50', 'gray.900');
  const textColor = useColorModeValue('black', 'white');

  return (
    <Box 
      p={4} 
      bg={bgColor} 
      color={textColor} 
      display="flex" 
      justifyContent="space-between" 
      alignItems="center"
      borderBottomWidth="1px"
    >
      <Text fontWeight="bold" fontSize="xl">US Tech News</Text>
      
      <Button onClick={toggleColorMode}>
        {colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
      </Button>
    </Box>
  );
};

export default Navbar;

The useColorModeValue hook is a lifesaver for manually tweaking specific elements that don’t look right in one of the modes.

I’ve used this frequently for high-contrast dashboards where readability is the top priority.

5. Implement a Searchable Employee Directory

For internal corporate tools, a searchable list is a common requirement. Using Chakra’s InputGroup and Table components, you can build a clean directory.

Here is how I typically structure a directory for a US-based firm.

import React, { useState } from 'react';
import {
  Table,
  Thead,
  Tbody,
  Tr,
  Th,
  Td,
  Input,
  InputGroup,
  InputLeftElement,
  Avatar,
  HStack,
  Text
} from '@chakra-ui/react';
import { SearchIcon } from '@chakra-ui/icons';

const EmployeeDirectory = () => {
  const [search, setSearch] = useState("");
  
  const employees = [
    { name: "Sarah Miller", dept: "Engineering", location: "San Francisco", email: "sarah@company.com" },
    { name: "Michael Chen", dept: "Marketing", location: "Austin", email: "michael@company.com" },
    { name: "Jessica Smith", dept: "HR", location: "Chicago", email: "jessica@company.com" },
  ];

  const filteredEmployees = employees.filter(emp => 
    emp.name.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <Box p={5}>
      <InputGroup mb={6}>
        <InputLeftElement pointerEvents="none">
          <SearchIcon color="gray.300" />
        </InputLeftElement>
        <Input 
          placeholder="Search employees by name..." 
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
      </InputGroup>

      <Table variant="simple">
        <Thead bg="gray.50">
          <Tr>
            <Th>Employee</Th>
            <Th>Department</Th>
            <Th>Location</Th>
          </Tr>
        </Thead>
        <Tbody>
          {filteredEmployees.map((emp, index) => (
            <Tr key={index}>
              <Td>
                <HStack>
                  <Avatar name={emp.name} size="sm" />
                  <Box>
                    <Text fontWeight="medium">{emp.name}</Text>
                    <Text fontSize="xs" color="gray.500">{emp.email}</Text>
                  </Box>
                </HStack>
              </Td>
              <Td>{emp.dept}</Td>
              <Td>{emp.location}</Td>
            </Tr>
          ))}
        </Tbody>
      </Table>
    </Box>
  );
};

export default EmployeeDirectory;

This layout provides a professional “Enterprise” feel that is very popular in US corporate environments.

I always use avatars because they make the list feel more personal and easier to scan.

Chakra UI has become my go-to library because it balances developer speed with design quality.

You may read:

• How to Build a React Login Component
• How to Fix React Component Not Defined Error
• How to Create a Reusable Button Component in React
• React Functional Component Unmount

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/