Configuration

getting started

installation

configuration

navigation

lists

forms

application shells

Configuration

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/react";
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/react";
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 @chakra-ui/gatsby-plugin . 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/react.

Chakra UI provides an extendTheme function that deep merges the default theme with your customizations.

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

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

Proudly developed in by Anuoluwapo Abraham