Getting Started

Installation#

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

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

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

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.

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
  return (
    <ChakraProvider>
      <App />
    </ChakraProvider>
  )
}

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
  return (
    <ChakraProvider>
      <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 extendTheme util - it will merge with the default theme
import { extendTheme } from "@chakra-ui/core"

// 2. Extend the theme to include custom colors, fonts, etc.
const colors = {
  brand: {
    900: "#1a365d",
    800: "#153e75",
    700: "#2a69ac",
  },
}

const customTheme = extendTheme({ colors })

// 3. Pass the `theme` prop to the `ChakraProvider`
function App() {
  return (
    <ChakraProvider theme={customTheme}>
      <App />
    </ChakraProvider>
  )
}

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

Props#

Name	Type	Default	Description
resetCSS	`boolean`	`true`	automatically includes `<CSSReset />`
theme	`Theme`	`@chakra-ui/theme`	optional custom theme
colorModeManager	`StorageManager`	`localStorageManager`	manager to persist a users color mode preference in
portalZIndex	`number`	`undefined`	common z-index to use for `Portal`

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.

Edit this page