Skip to main content
CodeSpeedTest
Languages
Start TypingJump into a test — pick any languageAdaptive TrainingUnlock chars as you master themPractice DrillsFocused sessions targeting weak spotsDaily ChallengesNew coding challenges every dayRace ModeCompete against others in real timeAI OpponentRace against an AI at your WPM levelTournamentsLive coding speed tournamentsArcade GamesZType, Overkill Survival, Glyphica & moreGamificationXP, coins, badges & quests
LeaderboardGlobal rankings for every languageCertificatesEarn verifiable Bronze / Silver / Gold certsActivityDaily streaks & historical analyticsProfileYour stats, badges & achievements
Browse Languages500+ languages with real code examplesBlogTips, guides & deep divesFree ToolsWPM calculator, typing speed report & moreFAQCommon questions answeredGetting StartedNew to CodeSpeedTest?AboutOur story & missionSupportGet help — Pro users get priorityContactGet in touch with the team
Pricing
  1. Home
  2. /
  3. Learn
  4. /
  5. Chakra-ui

Learn Chakra-ui - 10 Code Examples & CST Typing Practice Test

Chakra UI is a modular and accessible React component library that provides a set of composable, themeable, and responsive UI components.

View all 10 Chakra-ui code examples →
Chakra UI Counter ExampleChakra UI Button ExampleChakra UI Card ExampleChakra UI Modal ExampleChakra UI Tabs ExampleChakra UI Form ExampleChakra UI Alert ExampleChakra UI Progress ExampleChakra UI Accordion ExampleChakra UI Tooltip Example

Learn CHAKRA-UI with Real Code Examples

Updated Nov 23, 2025

Explain

Chakra UI allows developers to build React applications with prebuilt, accessible, and composable components.

It offers theming, style props, and responsive design utilities for fast development.

Chakra UI emphasizes developer productivity and accessibility.

Core Features

Prebuilt React components (Button, Modal, Input, Card)

Theming with extendable theme objects

Responsive and mobile-first design

Composable layout primitives (Box, Flex, Stack, Grid)

TypeScript support and documentation

Basic Concepts Overview

Components: Button, Input, Modal, Accordion

Layout: Box, Flex, Stack, Grid

Styling: style props (`p`, `m`, `color`, `bg`) and `sx` prop

Theming: global theme overrides via `extendTheme`

Responsive props using breakpoints (`sm`, `md`, `lg`, `xl`)

Project Structure

src/ - main React source folder

src/components/ - reusable Chakra components

src/theme/ - optional theme overrides

package.json - Chakra dependencies

public/ - static assets and index.html

Building Workflow

Install Chakra UI and dependencies

Wrap the app with ChakraProvider

Use prebuilt components in JSX

Apply styling with style props or custom theme

Test responsiveness using responsive props

Difficulty Use Cases

Beginner: using default Chakra components

Intermediate: customizing theme and layout

Advanced: building responsive dashboards

Expert: creating reusable design systems

Community: integrating Chakra with state management

Comparisons

Style-prop-based vs theme-overrides (MUI uses ThemeProvider + sx)

Composable primitives vs component-heavy libraries

Accessible by default vs needing configuration

Lightweight and flexible vs opinionated Material Design

React-only library

Versioning Timeline

2019 - Initial release of Chakra UI

2020 - v1 stable with accessible components

2021 - v1.6 improved responsive and theme features

2022 - Chakra UI v2 with major API updates

2025 - Current stable with active community contributions

Glossary

Composable component: reusable building block

Style props: inline prop-based styling

Theme: global design configuration

Responsive prop: adjusts styling based on breakpoints

Primitives: basic components (Box, Flex, Stack)

Installation Setup

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

Wrap your app with `ChakraProvider`

Optionally extend the default theme

Import and use components as needed

No external CSS files required

Environment Setup

Install Chakra UI and dependencies

Wrap app with ChakraProvider

Include fonts and icons if needed

Use style props or theme for styling

Test responsive layouts across devices

Config Files

package.json - npm dependencies

src/theme/ - custom theme

src/components/ - reusable Chakra components

index.js - app entry with ChakraProvider

webpack.config.js or Vite config - bundling

Cli Commands

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

npm run start - development server

npm run build - production build

Tree-shake components for performance

Optional: install Chakra icons

Internationalization

Text handled via React

RTL layouts supported

Integrates with i18n libraries

Theme unaffected by language

Supports multi-language apps

Accessibility

ARIA roles and keyboard navigation built-in

Screen-reader friendly components

Accessible forms, modals, and dialogs

Compliant with WCAG standards

Encourages semantic HTML structure

Ui Styling

Style-prop-based inline styling

Themeable via extendTheme

Responsive props for mobile-first design

Composable layout primitives

Customizable colors, typography, spacing

State Management

Components integrate with React state

Forms and modals manage local state

Works with Redux, Zustand, or React context

Dynamic updates handled via React

No internal global state

Data Management

Data handled via React props and state

Forms use controlled inputs

No internal data store in Chakra

Integrates seamlessly with front-end logic

Supports scalable UI for large apps

Architecture

React component-based architecture

Theme-driven styling system

Composable layout primitives for flexible UI

Responsive design via props

Accessibility-first approach

Rendering Model

React components render HTML and CSS via style props

JS handles component interactivity

Theming via extendTheme

Responsive props adjust layout across breakpoints

Composables create scalable UI

Architectural Patterns

Component-based modular architecture

ThemeProvider/ChakraProvider for global styling

Composable primitives for layout

Style props replace separate CSS

Accessible by default

Real World Architectures

Dashboards and admin portals

React SPAs and PWAs

Forms and interactive workflows

Landing pages and marketing sites

Rapid prototyping with accessible components

Design Principles

Accessibility-first components

Composable, reusable primitives

Style-prop-based theming

Responsive and mobile-first design

Lightweight and developer-friendly

Scalability Guide

Import only needed components

Use ChakraProvider for global theming

Compose primitives for reusable UI patterns

Lazy-load complex components

Maintain consistent style props and theme

Migration Guide

Replace prebuilt components from other UI libraries

Refactor layouts using Box, Flex, Stack

Apply responsive props to match design

Extend theme for colors and typography

Test accessibility and responsiveness

Performance Notes

Tree-shake unused components

Lightweight compared to full design systems

Style props avoid separate CSS files

Lazy-load heavy components

Use composable primitives for minimal DOM nodes

Security Notes

Validate user inputs in forms

Escape dynamic content

Ensure accessible modals and dialogs

Follow React security best practices

Secure third-party dependencies

Monitoring Analytics

Monitor bundle size

Test responsiveness across devices

Accessibility audits

Browser compatibility testing

Performance monitoring of dynamic components

Code Quality

Follow React best practices

Use semantic components

Minimize repetitive style props

Tree-shake unused components

Document theme and composables

Practical Examples

Responsive navigation bar with Flex and Box

Card layout using Stack and Grid

Form validation with Input, FormControl, and Button

Modal dialogs with accessibility support

Themed buttons with hover and focus styles

Troubleshooting

Ensure ChakraProvider wraps the app

Check theme overrides are correctly extended

Verify responsive props syntax

Avoid conflicting style props

Ensure accessibility props are properly set

Testing Guide

Visual testing with Storybook

Unit testing with Jest/RTL

Accessibility testing with axe-core

Responsive testing with breakpoints

Integration testing in React apps

Deployment Options

Static site hosting (Netlify, Vercel)

Server-side rendered React apps

Progressive Web Apps

Enterprise dashboards

SPAs with minimal CSS overhead

Tools Ecosystem

Chakra UI Core library

Chakra UI Icons

Theme customization via extendTheme

Layout primitives (Box, Flex, Stack, Grid)

Integration with Framer Motion for animations

Integrations

Seamless with React

Next.js and Gatsby compatible

Works with Redux, Zustand, or React context

TypeScript support included

Testing with Jest and React Testing Library

Productivity Tips

Leverage composable primitives

Use ChakraProvider early for consistent theming

Responsive props reduce CSS overhead

Lazy-load heavy components

Use TypeScript for type safety

Challenges

Build a responsive landing page with Box and Flex

Create a form with validation and themed inputs

Design a card-based layout using Stack and Grid

Implement modals with accessibility

Integrate Chakra with a full React SPA

Learning Path

Learn React fundamentals

Understand Chakra UI layout primitives

Explore prebuilt components and style props

Practice responsive design with props

Create custom themes with extendTheme

Skill Improvement Plan

Week 1: Basic components (Button, Box, Text)

Week 2: Layout using Flex, Stack, Grid

Week 3: Responsive design and breakpoints

Week 4: Custom theming

Week 5: Compose complex UIs and reusable components

Interview Questions

What is Chakra UI and why use it?

How does Chakra UI ensure accessibility?

Explain responsive style props

Difference between Chakra UI and MUI

How to extend a custom theme in Chakra?

Cheat Sheet

`Box`, `Flex`, `Stack` - layout primitives

`Button`, `Input`, `Modal` - common components

`colorScheme` - component theming

`p`, `m`, `gap` - spacing style props

`w={{ base: '100%', md: '50%' }}` - responsive width

Books

Mastering Chakra UI

Chakra UI by Example

Building React Apps with Chakra UI

Accessible UI with Chakra

Advanced Chakra UI Patterns

Tutorials

Chakra UI official documentation

YouTube Chakra UI tutorials

FreeCodeCamp Chakra + React guides

Community blogs and code examples

Udemy Chakra UI courses

Official Docs

https://chakra-ui.com/

https://github.com/chakra-ui/chakra-ui

https://chakra-ui.com/getting-started

Community Links

Chakra UI GitHub

Stack Overflow Chakra tag

Discord community

Reddit discussions

Community templates and starter kits

Community Support

Chakra UI GitHub repository

Stack Overflow Chakra tag

Discord community

Reddit discussions

Community templates and code examples

Monetization

Develop Chakra UI templates or dashboards

Offer React app development

Build reusable component libraries

Consulting for accessible UI projects

Rapid prototyping services

Future Roadmap

Expand component library

Enhance accessibility features

Improve TypeScript support

Better integration with React ecosystem

Community-driven templates and extensions

When Not To Use

Projects not using React

When prebuilt Material Design components are required

For static websites with minimal interactivity

When team prefers separate CSS files

For advanced enterprise dashboards requiring built-in complex components

Final Summary

Chakra UI is a React component library focused on accessibility and composability.

Provides flexible style props and responsive design utilities.

Themeable system allows global styling overrides.

Ideal for dashboards, SPAs, and rapid prototyping.

Developer-friendly, lightweight, and accessible by default.

Faq

Is Chakra UI free?

Yes - MIT license.

Does Chakra UI include JS?

Yes - React components include behavior.

Is Chakra UI responsive?

Yes - style props support breakpoints.

Can I customize Chakra UI?

Yes - extendTheme for colors, typography, and components.

Which browsers does Chakra support?

All modern browsers supported by React.

Code Sample Descriptions

1

Chakra UI Counter Example

import React, { useState } from 'react';
import { ChakraProvider, Box, Button, Heading, extendTheme } from '@chakra-ui/react';

const theme = extendTheme({ config: { initialColorMode: 'light', useSystemColorMode: false } });

const Counter = () => {
    const [count, setCount] = useState(0);
    const [isDark, setIsDark] = useState(false);

    return (
        <ChakraProvider theme={theme}>
        <Box textAlign='center' mt={10} bg={isDark ? 'gray.800' : 'gray.100'} color={isDark ? 'white' : 'black'} p={6} borderRadius='md'>
        <Heading mb={4}>Counter: {count}</Heading>
        <Button colorScheme='blue' mr={2} onClick={() => setCount(count + 1)}>+</Button>
        <Button colorScheme='red' mr={2} onClick={() => setCount(count - 1)}>-</Button>
        <Button colorScheme='gray' onClick={() => setCount(0)}>Reset</Button>
        <br /><br />
        <Button colorScheme='yellow' onClick={() => setIsDark(!isDark)}>Switch Theme</Button>
        </Box>
        </ChakraProvider>
    );
};

export default Counter;

Demonstrates a simple counter layout using Chakra UI components and React for interactivity.

Let’s Try →
2

Chakra UI Button Example

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

const theme = extendTheme({});

const ButtonExample = () => (
    <ChakraProvider theme={theme}>
        <VStack spacing={4} mt={10}>
        <Button colorScheme='blue'>Primary</Button>
        <Button colorScheme='red'>Danger</Button>
        <Button variant='outline'>Outline</Button>
        <Button variant='ghost'>Ghost</Button>
        <Button size='lg' colorScheme='green'>Large</Button>
        </VStack>
    </ChakraProvider>
);

export default ButtonExample;

Demonstrates different Chakra UI button variants and sizes.

Let’s Try →
3

Chakra UI Card Example

import React from 'react';
import { ChakraProvider, Box, Heading, Text, Button, extendTheme } from '@chakra-ui/react';

const theme = extendTheme({});

const CardExample = () => (
    <ChakraProvider theme={theme}>
        <Box maxW='sm' borderWidth='1px' borderRadius='lg' overflow='hidden' p={6} mt={10} mx='auto'>
        <Heading mb={2}>Card Title</Heading>
        <Text mb={4}>This is a simple Chakra UI card example.</Text>
        <Button colorScheme='teal'>Learn More</Button>
        </Box>
    </ChakraProvider>
);

export default CardExample;

Shows a simple card with content and actions using Chakra UI.

Let’s Try →
4

Chakra UI Modal Example

import React from 'react';
import { ChakraProvider, Button, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure, extendTheme } from '@chakra-ui/react';

const theme = extendTheme({});

const ModalExample = () => {
    const { isOpen, onOpen, onClose } = useDisclosure();
    return (
        <ChakraProvider theme={theme}>
        <Button mt={10} onClick={onOpen} colorScheme='blue'>Open Modal</Button>
        <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
        <ModalHeader>Modal Title</ModalHeader>
        <ModalBody>This is a Chakra UI modal example.</ModalBody>
        <ModalFooter>
        <Button colorScheme='blue' mr={3} onClick={onClose}>Close</Button>
        </ModalFooter>
        </ModalContent>
        </Modal>
        </ChakraProvider>
    );
};

export default ModalExample;

Shows opening and closing a modal dialog using Chakra UI.

Let’s Try →
5

Chakra UI Tabs Example

import React from 'react';
import { ChakraProvider, Tabs, TabList, TabPanels, Tab, TabPanel, extendTheme } from '@chakra-ui/react';

const theme = extendTheme({});

const TabsExample = () => (
    <ChakraProvider theme={theme}>
        <Tabs variant='enclosed' mt={10} mx='auto' maxW='md'>
        <TabList>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
        <Tab>Tab 3</Tab>
        </TabList>
        <TabPanels>
        <TabPanel><p>Content of Tab 1</p></TabPanel>
        <TabPanel><p>Content of Tab 2</p></TabPanel>
        <TabPanel><p>Content of Tab 3</p></TabPanel>
        </TabPanels>
        </Tabs>
    </ChakraProvider>
);

export default TabsExample;

Shows tab navigation using Chakra UI Tabs component.

Let’s Try →
6

Chakra UI Form Example

import React from 'react';
import { ChakraProvider, FormControl, FormLabel, Input, Button, VStack, extendTheme } from '@chakra-ui/react';

const theme = extendTheme({});

const FormExample = () => (
    <ChakraProvider theme={theme}>
        <VStack spacing={4} mt={10} mx='auto' maxW='md'>
        <FormControl>
        <FormLabel>Name</FormLabel>
        <Input placeholder='Enter your name' />
        </FormControl>
        <FormControl>
        <FormLabel>Email</FormLabel>
        <Input type='email' placeholder='Enter your email' />
        </FormControl>
        <Button colorScheme='blue'>Submit</Button>
        </VStack>
    </ChakraProvider>
);

export default FormExample;

Demonstrates a simple form with inputs and submit button using Chakra UI.

Let’s Try →
7

Chakra UI Alert Example

import React from 'react';
import { ChakraProvider, Alert, AlertIcon, VStack, extendTheme } from '@chakra-ui/react';

const theme = extendTheme({});

const AlertExample = () => (
    <ChakraProvider theme={theme}>
        <VStack spacing={4} mt={10} mx='auto' maxW='md'>
        <Alert status='success'><AlertIcon />Success Alert</Alert>
        <Alert status='error'><AlertIcon />Error Alert</Alert>
        <Alert status='warning'><AlertIcon />Warning Alert</Alert>
        <Alert status='info'><AlertIcon />Info Alert</Alert>
        </VStack>
    </ChakraProvider>
);

export default AlertExample;

Displays alerts with different statuses using Chakra UI.

Let’s Try →
8

Chakra UI Progress Example

import React, { useState, useEffect } from 'react';
import { ChakraProvider, Progress, extendTheme, Box } from '@chakra-ui/react';

const theme = extendTheme({});

const ProgressExample = () => {
    const [value, setValue] = useState(0);
    useEffect(() => { const interval = setInterval(() => setValue(v => (v >= 100 ? 0 : v + 10)), 1000); return () => clearInterval(interval); }, []);
    return (
        <ChakraProvider theme={theme}>
        <Box mt={10} maxW='md' mx='auto'>
        <Progress value={value} />
        </Box>
        </ChakraProvider>
    );
};

export default ProgressExample;

Shows a linear progress bar using Chakra UI Progress component.

Let’s Try →
9

Chakra UI Accordion Example

import React from 'react';
import { ChakraProvider, Accordion, AccordionItem, AccordionButton, AccordionPanel, AccordionIcon, extendTheme } from '@chakra-ui/react';

const theme = extendTheme({});

const AccordionExample = () => (
    <ChakraProvider theme={theme}>
        <Accordion mt={10} mx='auto' maxW='md'>
        <AccordionItem>
        <AccordionButton>Section 1<AccordionIcon /></AccordionButton>
        <AccordionPanel pb={4}>Content of Section 1</AccordionPanel>
        </AccordionItem>
        <AccordionItem>
        <AccordionButton>Section 2<AccordionIcon /></AccordionButton>
        <AccordionPanel pb={4}>Content of Section 2</AccordionPanel>
        </AccordionItem>
        </Accordion>
    </ChakraProvider>
);

export default AccordionExample;

Demonstrates collapsible sections using Chakra UI Accordion.

Let’s Try →
10

Chakra UI Tooltip Example

import React from 'react';
import { ChakraProvider, Tooltip, Button, extendTheme, Box } from '@chakra-ui/react';

const theme = extendTheme({});

const TooltipExample = () => (
    <ChakraProvider theme={theme}>
        <Box mt={10} textAlign='center'>
        <Tooltip label='Click me!' aria-label='A tooltip'>
        <Button colorScheme='blue'>Hover Me</Button>
        </Tooltip>
        </Box>
    </ChakraProvider>
);

export default TooltipExample;

Displays a button with a tooltip using Chakra UI Tooltip component.

Let’s Try →

Frequently Asked Questions about Chakra-ui

What is Chakra-ui?

Chakra UI is a modular and accessible React component library that provides a set of composable, themeable, and responsive UI components.

What are the primary use cases for Chakra-ui?

React-based web applications. Dashboards and admin panels. Rapid prototyping with composable components. Responsive and accessible UI projects. Customizable component libraries with theming

What are the strengths of Chakra-ui?

Accessible out of the box. Highly composable and flexible. Developer-friendly syntax using style props. Customizable theming system. Lightweight and tree-shakeable

What are the limitations of Chakra-ui?

React-only library. Style props may lead to verbose JSX. Not opinionated about design language (no Material Design). Limited prebuilt advanced components compared to MUI. Requires learning Chakra-specific props and theming

How can I practice Chakra-ui typing speed?

CodeSpeedTest offers 10+ real Chakra-ui code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

CReactPythonC++RustTypeScriptKotlinPHPJavaC#RubyMqlCqlN1qlCypherGremlinPartiqlHaskellElixirFsharpView all languages →
CodeSpeedTest

Improve your coding speed, code accuracy, and programming syntax WPM with practice sessions across 500+ programming languages.

Quick Links

HomeAboutFeaturesGetting StartedLanguages

Legal & Support

Pro ⚡ PricingContactPrivacy PolicyTerms of Service

Connect

CodeSpeedTest on GitHubCodeSpeedTest on TwitterEmail CodeSpeedTest

© 2026 CodeSpeedTest. All rights reserved.