Learn CHAKRA-UI with Real Code Examples
Updated Nov 23, 2025
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.