vike-react-chakra
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

npm version

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

Readme

Keywords

none

Package Sidebar

Install

npm i vike-react-chakra

Weekly Downloads

72

Version

1.0.2

License

MIT

Unpacked Size

6.37 kB

Total Files

7

Last publish

Collaborators

  • brillout
  • phonzammi