Usage with Vuepress

If you use Vuepress, you can extend your theme to install Chakra globally using Vuepress's theme inheritance.


Install Chakra UI Vue and its peer dependency, @emotion/css

yarn add @chakra-ui/vue @emotion/css


Extend Your Theme#

First create a theme folder in your .vuepress directory and extend you Vuepress theme in your theme/index.js file.

module.exports = {
  extend: '@vuepress/theme-default' // whichever vuepress theme you use

Add Chakra's Global Mixins#

Add the Chakra UI providers in your theme/enhanceApp.js file as shown.

import Chakra, { internalIcons, defaultTheme, parsePackIcons } from '@chakra-ui/vue'
import { faHandHoldingHeart } from '@fortawesome/free-solid-svg-icons'

export default ({
  Vue, // the version of Vue being used in the VuePress app
  options, // the options for the root Vue instance
  router, // the router instance for the app
  siteData, // site metadata
  isServer // is this enhancement applied in server-rendering or client
}) => {
    provide () {
      return {
        $chakraTheme: () => defaultTheme,
        $chakraColorMode: () => this.colorMode,
        $toggleColorMode: this.toggleColorMode,
        // icons must be parsed and spread into the icons provider to be available globally
        $chakraIcons: {
          ...parsePackIcons({ faHandHoldingHeart })
    methods: {
      toggleColorMode () {
        this.colorMode = this.colorMode === 'light' ? 'dark' : 'light'

Now you can wrap your main application inside the Chakra CThemeProvider component by creating a layout wrapper in theme/layouts/Layout.vue.

    <CReset />  <!-- NOTE: Resetting styles may have adverse effects on some themes -->
    <Layout />

import { CThemeProvider, CReset } from '@chakra-ui/vue'
import Layout from '@parent-theme/layouts/Layout.vue'

export default {
  name: 'ChakraLayout',
  components: {

Using Chakra components#

You can now use Chakra in your custom components for your theme in either your theme/components folder (available to other theme components), or your theme/global-components folder (available to your markdown pages as well as other components). Learn more about theme inheritance in the Vuepress documentation

In your my-component.vue file.

      Chakra Consumed! ⚡️

<script lang="js">
import { CBox, CButton } from '@chakra-ui/vue'

export default {
  name: 'MyComponent',
  components: {

Vuepress Codesandbox Starters#

Here's a link to sample component starter with Nuxt.js

Storybook Components#

You can also view all developed components in Storybook!

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!