Getting Started

Watch the Egghead Course#

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

Get started using our Framework Guides#

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

Create React App

Next.js

Gatsby

BlitzJS

RedwoodJS

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.

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel