Call To Action

import { Box, Button, Heading, Text } from '@chakra-ui/react'
import * as React from 'react'

export const App = () => {
  return (
    <Box as="section">
      <Box
        maxW="2xl"
        mx="auto"
        px={{ base: '6', lg: '8' }}
        py={{ base: '16', sm: '20' }}
        textAlign="center"
      >
        <Heading as="h2" size="3xl" fontWeight="extrabold" letterSpacing="tight">
          Ready to Grow?
        </Heading>
        <Text mt="4" fontSize="lg">
          Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing
          sagittis vel nulla nec.
        </Text>
        <Button mt="8" as="a" href="#" size="lg" colorScheme="blue" fontWeight="bold">
          Start Free Trial
        </Button>
      </Box>
    </Box>
  )
}

# Getting Started

All of the components in Chakra UI are designed for Chakra UI v1.0+<br>

#In some components we use `react-icons` to pep up the visual appearance. Feel free to replace them with your own icons.

## Installation

Inside your React project directory, install Chakra UI by running either of the following:

```sh
# npm
$ npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion react-icons
```

or when using yarn:

```sh
# yarn
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion react-icons
```

## Setup Chakra UI

For Chakra UI to work correctly, you need to setup the ChakraProvider at the root of your application.

```tsx
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'

export const App = () => {
  return (
    <ChakraProvider>
      <App />
    </ChakraProvider>
  )
}
```

## Chakra UI Docs

If you need more help, feel free to visit the [official webiste](https://chakra-ui.com) of Chakra UI. Here you can find help with installation, theming and much more.