Learn CHAKRA-UI with Real Code Examples

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.