Chakra UI Counter Example - Chakra-ui Typing CST Test

Chakra UI Counter Example — Chakra-ui Code

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

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;

Chakra-ui Language Guide

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

More Chakra-ui Typing Exercises

Practice Other Languages