ExampleComponent.tsx
import React from 'react'
import { Box, Button, Text } from '@chakra-ui/react'

const ExampleComponent = () => {
  const [count, setCount] = React.useState(0)

  const handleIncrement = () => {
    setCount(count + 1)
  }

  return (
    <Box p={4} border="1px" borderColor="gray.200" borderRadius="md">
      <Text fontSize="lg" mb={4}>
        Counter: {count}
      </Text>
      <Button onClick={handleIncrement} colorScheme="blue">
        Increment
      </Button>
    </Box>
  )
}

export default ExampleComponent
Code Block | Chakra UI Pro