Getting Started

Installation#

Inside your React project directory, install Chakra UI by running the following:

npm i @chakra-ui/core@next
# or
yarn add @chakra-ui/core@next

For create-react-app installation instructions, check this CRA templates guide

Setup Provider#

For Chakra UI to work correctly, you need to setup the ChakraProvider at the root of your application. You also add browser css reset styles by passing the resetCSS prop.

Go to the root of your application, and do this:

import * as React from "react"
// 1. import `ChakraProvider` component
import { ChakraProvider } from "@chakra-ui/core"
function App() {
  // 2. Use at the root of your app and pass `resetCSS` prop
  return (
    <ChakraProvider resetCSS>
      <App />
    </ChakraProvider>
  )
}

• For Next.js, you need to set this up in pages/_app.js or pages/_app.tsx
• For Gatsby, install the gatsby-plugin-chakra-ui. It does it automatically for you.
• For Create React App, you need to set this up in index.js or index.tsx

Add Custom theme (Optional)#

If you need to customize the default chakra theme to match your design requirements, you can extend the theme from @chakra-ui/core.

// 1. Import the theme and merge util
import { theme } from "@chakra-ui/core"
import { merge } from "@chakra-ui/utils"
// 2. Extend the theme to include custom colors, fonts, etc.
const customTheme = merge(theme, {
  colors: {
    brand: {
      900: "#1a365d",
      800: "#153e75",
      700: "#2a69ac",
    },
  },
})
// 3. Pass the `theme` prop to the `ChakraProvider`
function App() {
  return (
    <ChakraProvider resetCSS theme={customTheme}>
      <App />
    </ChakraProvider>
  )
}

That's it, you're good to go!

Notes on TypeScript 🚨#

Please note that when adding Chakra UI to a TypeScript project, a minimum TypeScript version of 3.8.0 is required.

If you're adding Chakra UI to a create-react-app project, this means you'll need to manually upgrade typescript to ^3.8.0.

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.