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/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>
  )
}