Getting Started

Watch the Egghead Course#

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

Build a Modern User Interface with Chakra UI

In this free course, you will learn the basics of Chakra UI and how to build well-designed, accessible user interfaces with speed!

Start learning

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.

Direct integrations#

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

Installation#

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@^4

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

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 (
    <ChakraProvider>
      <Component />
    </ChakraProvider>
  )
}

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.

Contributing#

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