Package Exports

@chakra-ui/provider
@chakra-ui/provider/dist/chakra-ui-provider.cjs.js
@chakra-ui/provider/dist/chakra-ui-provider.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@chakra-ui/provider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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>
  )
}