Getting Started

Watch the Egghead Course#

Hello and welcome to Chakra UI 😄. If you're new here, watch our free course below.

Framework Guide#

Whichever framework or tool you're using, we've put together step-by-step guides to get you up and running with Chakra UI.

Create React App





Remix Logo


Direct integrations#

If you're working without any of the frameworks above, install Chakra UI using the steps below


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

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^5
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^5

Set up Provider#

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

Go to the root of your application and do this:

import * as React from 'react'
// 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react'
function App({ Component }) {
// 2. Use at the root of your app
return (
<Component />

Use our Create-React-App Templates#

  • For Create React App, you need to set this up in index.js or index.tsx

See the guide for our create-react-app templates if you'd like to generate a Chakra-enabled create-react-app project from scratch.


Please see our contribution guidelines to learn how you can contribute to this project.

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel