Setting up

Run npm install bze-ui-library and go for React Set up.

React set up

In your App component wrap it with <ChakraWrapperProvider />, see below:

  <ChakraProviderWrapper value={chakraTheme}>
    <App />
  </ChakraProviderWrapper>

Take note that it is also using chakraTheme, you should also import it from the library to provide default theme estilization.

Customizing

If you want to create a custom theme for the lib you can just import themeConfig and merge with your theme following chakra theming standards in the docs.

  // theme.ts

  import { themeConfig } from 'bze-ui-library'

  const customTheme = defineConfig({}) // Your custom theme

  export const theme = createSystem(customTheme, themeConfig) // Merge to bze-ui-library themeConfig

This library has been made accordingly to version 3 or ChakraUI.

Then, just use your newly created theme on <ChakraProviderWrapper /> and you are good to go!

  import { theme } from './theme.ts'

  <ChakraProviderWrapper value={theme}>
    <App />
  </ChakraProviderWrapper>