How to install Chakra-ui in react project? – Code Example

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/[email protected]^11 @emotion/[email protected]^11 [email protected]^6

# yarn
yarn add @chakra-ui/react @emotion/[email protected]^11 @emotion/[email protected]^11 [email protected]^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>
  )
}