vike-react-chakra

vike-react-chakra

Integrates Chakra UI into your vike-react app.

Installation
Settings
Version history
See also

Installation

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

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

• 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