Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsShowcaseBlogGuides
Sponsor

Installation

How to install and set up Chakra UI in your project

AI TipWant to skip the docs? Use the MCP Server

Framework Guide

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

Next.js

Easily add Chakra UI with Next.js app

Vite

Use Chakra UI with Vite

Stackblitz

Try Chakra UI in Stackblitz sandbox

The minimum node version required is Node.20.x

Installation

To manually set up Chakra UI in your project, follow the steps below.

1

Install @chakra-ui/react

npm i @chakra-ui/react @emotion/react
2

Add snippets

Snippets are pre-built components that you can use to build your UI faster. Using the @chakra-ui/cli you can add snippets to your project.

npx @chakra-ui/cli snippet add
3

Setup provider

Wrap your application with the Provider component generated in the components/ui/provider component at the root of your application.

This provider composes the following:

  • ChakraProvider from @chakra-ui/react for the styling system
  • ThemeProvider from next-themes for color mode
import { Provider } from "@/components/ui/provider"

function App({ Component, pageProps }) {
  return (
    <Provider>
      <Component {...pageProps} />
    </Provider>
  )
}
4

Update tsconfig

If you're using TypeScript, you need to update the compilerOptions in the tsconfig file to include the following options:

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "skipLibCheck": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

If you're using JavaScript, create a jsconfig.json file and add the above code to the file.

5

Enjoy!

With the power of the snippets and the primitive components from Chakra UI, you can build your UI faster.

import { Button, HStack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HStack>
      <Button>Click me</Button>
      <Button>Click me</Button>
    </HStack>
  )
}

Learn

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.

Contribute

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.

Next

Migration