To use Chakra UI in your project, run one of the following commands in your terminal:

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

After installing Chakra UI, you need to set up the ChakraProvider at the root of your application. This can be either in your index.jsx, index.tsx or App.jsx depending on the framework you use.

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

Framework Guide#

Chakra UI works in your favorite framework. We've put together step-by-step guides for these frameworks:

Next.js (App)

Next.js (Pages)




Remix Logo


Vite Logo




Watch our official courses and dive into dozens of videos that will teach you everything you need to know about Chakra UI, from basics to advanced concepts.

Egghead Logo

Egghead Course

Egghead Logo

Chakra UI for beginners


Whether you're a beginner or advanced Chakra UI user, joining our community is the best way to connect with like-minded people who build great products with the library.

Join the Discord

Follow us on Twitter

Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel