@chakra-ui/provider

Standalone React provider for Chakra-based custom component libraries.

Warning

This package is provided for building custom component libraries, and does not include any default theme or configurations. If you are not sure why you are using it, please use @chakra-ui/react instead;

Installation

yarn add @chakra-ui/provider

# or

npm i @chakra-ui/provider

Usage

As the default theme and config is not included, you will need a theme object following the system-ui specification, augmented with the following configuration properties.

More details on ChakraProvider's available props can be found here

import * as React from "react"

// 1. import `ChakraProvider` component
import { ChakraProvider } from "@chakra-ui/provider"

// 2. build your theme and config
const theme = {
  // ... your system-ui theme
  config: {
    useSystemColorMode: false, // or true
    initialColorMode: "light", // or "dark"
    cssVarPrefix: "chakra", // any string
  }
}

// 3. Use at the root of your app
function App({ Component }) {
  return (
    <ChakraProvider theme={theme}>
      <Component />
    </ChakraProvider>
  )
}