In this article we will show you how to install Chakra-ui in react projects. You can use the template
property of create-react-app
to start your project with chakra built in. Or you can manually install chakra libraries and then include them in your existing project.
Code Example
1. Using template in create-react-app
For Javascript –
# Using npx npx create-react-app my-app --template @chakra-ui # Using yarn yarn create react-app my-app --template @chakra-ui
For TypeScript –
# Using npx npx create-react-app my-app --template @chakra-ui/typescript # Using yarn yarn create react-app my-app --template @chakra-ui/typescript
2. Manual Installation
# npx npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 # yarn yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
After installation you will need to import it in your App.js
file –
import * as React from 'react' import { ChakraProvider } from '@chakra-ui/react' function App() { return ( <ChakraProvider> <App /> </ChakraProvider> ) }