vike-react-chakra

Integrates Chakra UI into your vike-react app.

Installation
Settings
Version history
See also

Installation

1. npm install vike-react-chakra @chakra-ui/react @emotion/react
2. Extend +config.js:

   // pages/+config.js
   
   import vikeReact from 'vike-react/config'
   import vikeReactChakra from 'vike-react-chakra/config'
   
   export default {
     // ...
     extends: [vikeReact, vikeReactChakra]
   }

3. You can now use Chakra in any of your components.

   import { HStack, Button } from '@chakra-ui/react'
   
   function SomeComponent() {
     return (
       <HStack>
         <Button>Click me</Button>
         <Button>Click me</Button>
       </HStack>
     )
   }

[!NOTE] The vike-react-chakra extension requires vike-react.

Settings

vike-react-chakra provides a configuration +chakra for setting the theme system and locale.

// pages/+chakra.js

export { chakra }

import { createSystem, defaultConfig, defineConfig } from '@chakra-ui/react'

const customConfig = defineConfig({
  globalCss: {
    "html, body": {
      margin: 0,
      padding: 0
    }
  }
})

const system = createSystem(defaultConfig, customConfig)

const chakra = {
  system,
  locale: "fr-FR"
}

You can remove Chakra from some of your pages:

// pages/about/+chakra.js

export const chakra = null

For full customization consider ejecting.

[!NOTE] Consider making a Pull Request before ejecting.

See also

• Vike Docs > Chakra UI