Getting Started

Add Chakra UI to your website and write some code!


Installation

To install Chakra UI on your website, you will need to add the packages either via yarn or npm. In the root of your application, run the following command:

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

or

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

As you can see, we are also installing @emotion/react, @emotion/styled and framer-motion. This is because Chakra UI depends upon them. No need to worry about these extra dependencies for now.

Chakra Provider

Now that we have the packages installed, we need to wrap our app with ChakraProvider. Please follow along with your framework below as each one is different.

React

In the root of your application:

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>
  );
}
Next.js

In _app.js:

_app.js
import { ChakraProvider } from "@chakra-ui/react"

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}
export default MyApp
Gatsby

Add the @chakra-ui/gatsby-plugin:

npm i @chakra-ui/gatsby-plugin

...... or ......

yarn add @chakra-ui/gatsby-plugin

🎉 Chakra UI is now ready to use! 🎉

Last updated on August 05, 2021

What Is Chakra UI?

Default Theme


Legal

Terms

Disclaimer

Privacy Policy

Carlson Technologies Logo© Copyright 2021, Carlson Technologies LLC. All Rights Reserved.

Powered by

Vercel Logo