diff --git a/README.md b/README.md
index cfd5ce2f0..404a830fd 100644
--- a/README.md
+++ b/README.md
@@ -42,6 +42,7 @@ yarn create nuxt-app <my-project>
     - [Bootstrap](https://github.com/bootstrap-vue/bootstrap-vue)
     - [Buefy](https://buefy.org)
     - [Bulma](https://github.com/jgthms/bulma)
+    - [Chakra UI](https://github.com/chakra-ui/chakra-ui-vue)
     - [Element](https://github.com/ElemeFE/element)
     - [Framevuerk](https://github.com/framevuerk/framevuerk)
     - [iView](https://www.iviewui.com/)
diff --git a/packages/cna-template/template/frameworks/chakra-ui/layouts/default.vue b/packages/cna-template/template/frameworks/chakra-ui/layouts/default.vue
new file mode 100644
index 000000000..8fb1f136c
--- /dev/null
+++ b/packages/cna-template/template/frameworks/chakra-ui/layouts/default.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="container">
+    <CThemeProvider>
+      <CColorModeProvider>
+        <CBox font-family="body" as="main">
+          <CReset />
+          <Nuxt />
+        </CBox>
+      </CColorModeProvider>
+    </CThemeProvider>
+  </div>
+</template>
+<script>
+import {
+  CThemeProvider,
+  CColorModeProvider,
+  CReset,
+  CBox
+} from '@chakra-ui/vue'
+
+export default {
+  name: 'App',
+  components: {
+    CThemeProvider,
+    CColorModeProvider,
+    CReset,
+    CBox
+  }
+}
+</script>
diff --git a/packages/cna-template/template/frameworks/chakra-ui/package.json b/packages/cna-template/template/frameworks/chakra-ui/package.json
new file mode 100644
index 000000000..afe7a4bde
--- /dev/null
+++ b/packages/cna-template/template/frameworks/chakra-ui/package.json
@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@chakra-ui/nuxt": "^0.0.7",
+    "@nuxtjs/emotion": "^0.0.1"
+  }
+}
diff --git a/packages/cna-template/template/frameworks/chakra-ui/pages/index.vue b/packages/cna-template/template/frameworks/chakra-ui/pages/index.vue
new file mode 100644
index 000000000..25445adab
--- /dev/null
+++ b/packages/cna-template/template/frameworks/chakra-ui/pages/index.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="container">
+    <CBox
+      v-bind="mainStyles[colorMode]"
+      d="flex"
+      w="100vw"
+      h="100vh"
+      flex-dir="column"
+      justify-content="center"
+    >
+      <CHeading text-align="center" mb="4">
+        ⚡️ Hello chakra-ui/vue
+      </CHeading>
+      <CFlex justify="center" direction="column" align="center">
+        <CBox mb="3">
+          <CIconButton
+            mr="3"
+            :icon="colorMode === 'light' ? 'moon' : 'sun'"
+            :aria-label="`Switch to ${
+              colorMode === 'light' ? 'dark' : 'light'
+            } mode`"
+            @click="toggleColorMode"
+          />
+          <CButton
+            left-icon="info"
+            variant-color="blue"
+            @click="showToast"
+          >
+            Show Toast
+          </CButton>
+        </CBox>
+        <CAvatarGroup>
+          <CAvatar
+            name="Evan You"
+            alt="Evan You"
+            src="https://pbs.twimg.com/profile_images/1206997998900850688/cTXTQiHm_400x400.jpg"
+          >
+            <CAvatarBadge size="1.0em" bg="green.500" />
+          </CAvatar>
+          <CAvatar
+            name="Jonathan Bakebwa"
+            alt="Jonathan Bakebwa"
+            src="https://res.cloudinary.com/xtellar/image/upload/v1572857445/me_zqos4e.jpg"
+          >
+            <CAvatarBadge size="1.0em" bg="green.500" />
+          </CAvatar>
+          <CAvatar
+            name="Segun Adebayo"
+            alt="Segun Adebayo"
+            src="https://pbs.twimg.com/profile_images/1169353373012897802/skPUWd6e_400x400.jpg"
+          >
+            <CAvatarBadge size="1.0em" bg="green.500" />
+          </CAvatar>
+          <CAvatar src="pop">
+            <CAvatarBadge size="1.0em" border-color="papayawhip" bg="tomato" />
+          </CAvatar>
+        </CAvatarGroup>
+        <CButton
+          left-icon="close"
+          variant-color="red"
+          mt="3"
+          @click="showModal = true"
+        >
+          Delete Account
+        </CButton>
+        <CModal :is-open="showModal">
+          <CModalOverlay />
+          <CModalContent>
+            <CModalHeader>Are you sure?</CModalHeader>
+            <CModalBody>Deleting user cannot be undone</CModalBody>
+            <CModalFooter>
+              <CButton @click="showModal = false">
+                Cancel
+              </CButton>
+              <CButton
+                margin-left="3"
+                variant-color="red"
+                @click="showModal = false"
+              >
+                Delete User
+              </CButton>
+            </CModalFooter>
+            <CModalCloseButton @click="showModal = false" />
+          </CModalContent>
+        </CModal>
+      </CFlex>
+    </CBox>
+  </div>
+</template>
+
+<script lang="js">
+import {
+  CBox,
+  CButton,
+  CAvatarGroup,
+  CAvatar,
+  CAvatarBadge,
+  CModal,
+  CModalContent,
+  CModalOverlay,
+  CModalHeader,
+  CModalFooter,
+  CModalBody,
+  CModalCloseButton,
+  CIconButton,
+  CFlex,
+  CHeading
+} from '@chakra-ui/vue'
+
+export default {
+  name: 'App',
+  inject: ['$chakraColorMode', '$toggleColorMode'],
+  components: {
+    CBox,
+    CButton,
+    CAvatarGroup,
+    CAvatar,
+    CAvatarBadge,
+    CModal,
+    CModalContent,
+    CModalOverlay,
+    CModalHeader,
+    CModalFooter,
+    CModalBody,
+    CModalCloseButton,
+    CIconButton,
+    CFlex,
+    CHeading
+  },
+  data () {
+    return {
+      showModal: false,
+      mainStyles: {
+        dark: {
+          bg: 'gray.700',
+          color: 'whiteAlpha.900'
+        },
+        light: {
+          bg: 'white',
+          color: 'gray.900'
+        }
+      }
+    }
+  },
+  computed: {
+    colorMode () {
+      return this.$chakraColorMode()
+    },
+    theme () {
+      return this.$chakraTheme()
+    },
+    toggleColorMode () {
+      return this.$toggleColorMode
+    }
+  },
+  methods: {
+    showToast () {
+      this.$toast({
+        title: 'Account created.',
+        description: "We've created your account for you.",
+        status: 'success',
+        duration: 10000,
+        isClosable: true
+      })
+    }
+  }
+}
+</script>
diff --git a/packages/cna-template/template/nuxt/nuxt.config.js b/packages/cna-template/template/nuxt/nuxt.config.js
index 866293d17..225649b49 100644
--- a/packages/cna-template/template/nuxt/nuxt.config.js
+++ b/packages/cna-template/template/nuxt/nuxt.config.js
@@ -112,6 +112,11 @@ export default {
     <%_ } else if (ui === 'buefy') { _%>
     // Doc: https://buefy.github.io/#/documentation
     'nuxt-buefy',
+    <%_ } else if (ui === 'chakra-ui') { _%>
+    // Doc: https://github.com/chakra-ui/chakra-ui-vue/tree/develop/packages/nuxt-chakra
+    // Doc: https://github.com/nuxt-community/emotion-module#readme
+    '@chakra-ui/nuxt',
+    '@nuxtjs/emotion',
     <%_ } _%>
     <%_ if (axios) { _%>
     // Doc: https://axios.nuxtjs.org/usage
diff --git a/packages/create-nuxt-app/lib/prompts.js b/packages/create-nuxt-app/lib/prompts.js
index 3614bcca1..4232455c4 100644
--- a/packages/create-nuxt-app/lib/prompts.js
+++ b/packages/create-nuxt-app/lib/prompts.js
@@ -35,6 +35,7 @@ module.exports = [
       { name: 'Bootstrap Vue', value: 'bootstrap' },
       { name: 'Buefy', value: 'buefy' },
       { name: 'Bulma', value: 'bulma' },
+      { name: 'Chakra UI', value: 'chakra-ui' },
       { name: 'Element', value: 'element-ui' },
       { name: 'Framevuerk', value: 'framevuerk' },
       { name: 'iView', value: 'iview' },
diff --git a/packages/create-nuxt-app/test/snapshots/index.test.js.md b/packages/create-nuxt-app/test/snapshots/index.test.js.md
index 28431d4df..6792b3995 100644
--- a/packages/create-nuxt-app/test/snapshots/index.test.js.md
+++ b/packages/create-nuxt-app/test/snapshots/index.test.js.md
@@ -3194,6 +3194,116 @@ Generated by [AVA](https://avajs.dev).
     }␊
     `
 
+## verify ui: Chakra UI
+
+> Generated files
+
+    [
+      '.editorconfig',
+      '.gitignore',
+      'README.md',
+      'assets/README.md',
+      'components/Logo.vue',
+      'components/README.md',
+      'layouts/README.md',
+      'layouts/default.vue',
+      'middleware/README.md',
+      'nuxt.config.js',
+      'package.json',
+      'pages/README.md',
+      'pages/index.vue',
+      'plugins/README.md',
+      'static/README.md',
+      'static/favicon.ico',
+      'store/README.md',
+    ]
+
+> package.json
+
+    {
+      dependencies: {
+        '@chakra-ui/nuxt': '^0.0.7',
+        '@nuxtjs/emotion': '^0.0.1',
+        nuxt: '^2.14.0',
+      },
+      devDependencies: {},
+      private: true,
+      scripts: {
+        build: 'nuxt build',
+        dev: 'nuxt',
+        generate: 'nuxt generate',
+        start: 'nuxt start',
+      },
+    }
+
+> Generated nuxt.config.js
+
+    `␊
+    export default {␊
+      /*␊
+      ** Nuxt rendering mode␊
+      ** See https://nuxtjs.org/api/configuration-mode␊
+      */␊
+      mode: 'universal',␊
+      /*␊
+      ** Nuxt target␊
+      ** See https://nuxtjs.org/api/configuration-target␊
+      */␊
+      target: 'server',␊
+      /*␊
+      ** Headers of the page␊
+      ** See https://nuxtjs.org/api/configuration-head␊
+      */␊
+      head: {␊
+        title: process.env.npm_package_name || '',␊
+        meta: [␊
+          { charset: 'utf-8' },␊
+          { name: 'viewport', content: 'width=device-width, initial-scale=1' },␊
+          { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }␊
+        ],␊
+        link: [␊
+          { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }␊
+        ]␊
+      },␊
+      /*␊
+      ** Global CSS␊
+      */␊
+      css: [␊
+      ],␊
+      /*␊
+      ** Plugins to load before mounting the App␊
+      ** https://nuxtjs.org/guide/plugins␊
+      */␊
+      plugins: [␊
+      ],␊
+      /*␊
+      ** Auto import components␊
+      ** See https://nuxtjs.org/api/configuration-components␊
+      */␊
+      components: true,␊
+      /*␊
+      ** Nuxt.js dev-modules␊
+      */␊
+      buildModules: [␊
+      ],␊
+      /*␊
+      ** Nuxt.js modules␊
+      */␊
+      modules: [␊
+        // Doc: https://github.com/chakra-ui/chakra-ui-vue/tree/develop/packages/nuxt-chakra␊
+        // Doc: https://github.com/nuxt-community/emotion-module#readme␊
+        '@chakra-ui/nuxt',␊
+        '@nuxtjs/emotion',␊
+      ],␊
+      /*␊
+      ** Build configuration␊
+      ** See https://nuxtjs.org/api/configuration-build/␊
+      */␊
+      build: {␊
+      }␊
+    }␊
+    `
+
 ## verify ui: Element
 
 > Generated files
diff --git a/packages/create-nuxt-app/test/snapshots/index.test.js.snap b/packages/create-nuxt-app/test/snapshots/index.test.js.snap
index b98f78aac..3831b4189 100644
Binary files a/packages/create-nuxt-app/test/snapshots/index.test.js.snap and b/packages/create-nuxt-app/test/snapshots/index.test.js.snap differ