diff --git a/.changeset/beige-ants-beg.md b/.changeset/beige-ants-beg.md
new file mode 100644
index 00000000..b16752a1
--- /dev/null
+++ b/.changeset/beige-ants-beg.md
@@ -0,0 +1,21 @@
+---
+"@chakra-ui/c-visually-hidden": patch
+"@chakra-ui/c-close-button": patch
+"@chakra-ui/c-accordion": patch
+"@chakra-ui/c-pin-input": patch
+"@chakra-ui/c-checkbox": patch
+"@chakra-ui/c-skip-nav": patch
+"@chakra-ui/c-avatar": patch
+"@chakra-ui/c-popper": patch
+"@chakra-ui/c-input": patch
+"@chakra-ui/c-code": patch
+"@chakra-ui/c-icon": patch
+"@chakra-ui/vue-layout": patch
+"@chakra-ui/vue-styled": patch
+"@chakra-ui/vue-system": patch
+"@chakra-ui/c-tag": patch
+"@chakra-ui/nuxt-next": patch
+"@chakra-ui/vue-next": patch
+---
+
+Normalize emotion cache options
diff --git a/.changeset/blue-penguins-swim.md b/.changeset/blue-penguins-swim.md
new file mode 100644
index 00000000..853de87d
--- /dev/null
+++ b/.changeset/blue-penguins-swim.md
@@ -0,0 +1,10 @@
+---
+"@chakra-ui/c-visually-hidden": patch
+"@chakra-ui/vue-accessibilty": patch
+"@chakra-ui/vue-styled": patch
+"@chakra-ui/vue-system": patch
+"@chakra-ui/nuxt-next": patch
+"@chakra-ui/vue-next": patch
+---
+
+Resolve @emotion/css package dependency
diff --git a/.github/composite-actions/install/action.yml b/.github/composite-actions/install/action.yml
index 9f5c4b0b..9bef24ef 100644
--- a/.github/composite-actions/install/action.yml
+++ b/.github/composite-actions/install/action.yml
@@ -49,6 +49,6 @@ runs:
     - name: Install dependencies
       shell: bash
       run: |
-        pnpm install --frozen-lockfile
+        pnpm install --no-frozen-lockfile
         npx cypress verify
         npx cypress info
diff --git a/@types/components.d.ts b/@types/components.d.ts
index 8fcb069c..eacea305 100644
--- a/@types/components.d.ts
+++ b/@types/components.d.ts
@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-02-25T05:49:19.660Z
+ * This file was generated on 2023-02-25T15:12:13.221Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
diff --git a/components.d.ts b/components.d.ts
index 8fcb069c..eacea305 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-02-25T05:49:19.660Z
+ * This file was generated on 2023-02-25T15:12:13.221Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
diff --git a/modules/nuxt/src/module.ts b/modules/nuxt/src/module.ts
index f2f09e0e..6480c9cb 100644
--- a/modules/nuxt/src/module.ts
+++ b/modules/nuxt/src/module.ts
@@ -8,12 +8,14 @@ import {
 import type * as NuxtSchema from "@nuxt/schema"
 import type * as Theme from "@chakra-ui/theme"
 import type * as ChakraUI from "@chakra-ui/vue-next"
-import * as Chakra from "@chakra-ui/vue-next"
+import {
+  ChakraComponents,
+  extendTheme as _extendTheme,
+} from "@chakra-ui/vue-next"
 import mergeWith from "lodash.mergewith"
 import { defu } from "defu"
 
-const { extendTheme: _extendTheme } = Chakra
-const ChakraPlugin = Chakra.default
+// const { extendTheme: _extendTheme } = Chakra
 
 /** Chakra UI Vue SSR Context State */
 export interface ChakraUISSRContext {
@@ -77,9 +79,12 @@ export default defineNuxtModule<ChakraModuleOptions>({
 
     // Transpile
     nuxt.options.build.transpile.push("@chakra-ui/vue-next")
+    nuxt.options.build.transpile.push("@emotion/server")
+    nuxt.options.build.transpile.push("@emotion/css")
+    nuxt.options.build.transpile.push("@emotion/css/create-instance")
 
     // Auto-import components
-    for (const component in Chakra) {
+    for (const component in ChakraComponents) {
       /**
        * Group of strict checks to make sure that
        * we only generate types for components.
@@ -87,16 +92,16 @@ export default defineNuxtModule<ChakraModuleOptions>({
       if (
         component.startsWith("C") &&
         // @ts-ignore
-        Chakra[component]?.name &&
+        ChakraComponents[component]?.name &&
         // @ts-ignore
-        Chakra[component]?.setup &&
+        ChakraComponents[component]?.setup &&
         // @ts-ignore
-        typeof Chakra[component]?.setup === "function"
+        typeof ChakraComponents[component]?.setup === "function"
       ) {
         addComponent({
           name: component,
           // @ts-ignore
-          export: Chakra[component]?.name,
+          export: ChakraComponents[component]?.name,
           filePath: "@chakra-ui/vue-next",
         })
       }
@@ -121,7 +126,13 @@ export default defineNuxtModule<ChakraModuleOptions>({
     const viteConfig = nuxt.options.vite || {}
     const extendedViteConfigOptions = {
       optimizeDeps: {
-        include: ["lodash.mergewith", "lodash.camelcase", "lodash.memoize"],
+        include: [
+          "lodash.mergewith",
+          "lodash.camelcase",
+          "lodash.memoize",
+          "@emotion/server",
+          "@emotion/css",
+        ],
       },
     }
     const finalViteConfig = defu(viteConfig, extendedViteConfigOptions)
diff --git a/modules/nuxt/src/runtime/chakra.ts b/modules/nuxt/src/runtime/chakra.ts
index 96df1baa..a7a608ee 100644
--- a/modules/nuxt/src/runtime/chakra.ts
+++ b/modules/nuxt/src/runtime/chakra.ts
@@ -1,13 +1,11 @@
 import type * as NuxtAppTypes from "nuxt/app"
 import { defineNuxtPlugin, useAppConfig } from "#imports"
-import Chakra, {
-  chakra,
+import {
   cookieStorageManagerSSR,
-  extendChakra,
   ColorModeConstants,
   extendTheme,
   ColorModeScriptProps,
-  domElements,
+  createChakra,
 } from "@chakra-ui/vue-next"
 import { parseCookies } from "h3"
 import type { ChakraModuleOptions } from "../module"
@@ -45,36 +43,30 @@ export default defineNuxtPlugin((nuxtApp) => {
     }
   }
 
-  // Install plugin
-  app.use(
-    // TODO: Fix type for Chakra plugin
-    Chakra as any,
-    extendChakra({
-      ...(chakraConfig.emotionCacheOptions && {
-        emotionCacheOptions: chakraConfig.emotionCacheOptions,
-      }),
-      ...(chakraConfig.cssReset && {
-        cssReset: chakraConfig.cssReset,
-      }),
-      extendTheme: extendTheme({
-        ...(chakraConfig.extendTheme && chakraConfig.extendTheme),
-        config: {
-          ...(chakraConfig.extendTheme?.config && {
-            extendTheme: chakraConfig.extendTheme.config,
-          }),
-          initialColorMode: isBrowser
-            ? window.$chakraSSRContext?.theme?.ssrColorMode
-            : ssrColorMode,
-        },
-      }),
-      colorModeManager: cookieStorageManagerSSR(
-        ColorModeConstants.CookieStorageKey
-      ),
-      icons: chakraConfig.icons,
-    })
-  )
-
-  domElements.forEach((tag) => {
-    app.component(`chakra.${tag}`, chakra(tag))
+  const chakra = createChakra({
+    ...(chakraConfig.emotionCacheOptions && {
+      emotionCacheOptions: chakraConfig.emotionCacheOptions,
+    }),
+    ...(chakraConfig.cssReset && {
+      cssReset: chakraConfig.cssReset,
+    }),
+    extendTheme: extendTheme({
+      ...(chakraConfig.extendTheme && chakraConfig.extendTheme),
+      config: {
+        ...(chakraConfig.extendTheme?.config && {
+          extendTheme: chakraConfig.extendTheme.config,
+        }),
+        initialColorMode: isBrowser
+          ? window.$chakraSSRContext?.theme?.ssrColorMode
+          : ssrColorMode,
+      },
+    }),
+    colorModeManager: cookieStorageManagerSSR(
+      ColorModeConstants.CookieStorageKey
+    ),
+    icons: chakraConfig.icons,
   })
+
+  // Install plugin
+  app.use(chakra)
 })
diff --git a/modules/nuxt/src/runtime/emotion.client.ts b/modules/nuxt/src/runtime/emotion.client.ts
index 9302e9e8..440f2850 100644
--- a/modules/nuxt/src/runtime/emotion.client.ts
+++ b/modules/nuxt/src/runtime/emotion.client.ts
@@ -1,4 +1,4 @@
-import { hydrate } from "@emotion/css"
+import { hydrate } from "@chakra-ui/vue-system"
 import { defineNuxtPlugin } from "#imports"
 
 export default defineNuxtPlugin((_) => {
diff --git a/modules/nuxt/src/runtime/emotion.server.ts b/modules/nuxt/src/runtime/emotion.server.ts
index c975bec1..0a7da891 100644
--- a/modules/nuxt/src/runtime/emotion.server.ts
+++ b/modules/nuxt/src/runtime/emotion.server.ts
@@ -1,6 +1,10 @@
-import { extractCritical } from "@emotion/server"
 import { NitroApp } from "nitropack"
 
+import createEmotionServer from "@emotion/server/create-instance"
+import { cache } from "@chakra-ui/vue-system"
+
+const { extractCritical } = createEmotionServer(cache)
+
 /**
  * Why are we declaring types for  `defineNitroPlugin`?
  *
diff --git a/package.json b/package.json
index 8ef78a30..aa4c70e8 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,6 @@
     "@chakra-ui/utils": "2.0.15",
     "@chakra-ui/vue-auto-import": "workspace:*",
     "@chakra-ui/vue-next": "workspace:*",
-    "@chakra-ui/vue-styled": "workspace:*",
     "@chakra-ui/vue-system": "workspace:*",
     "@chakra-ui/vue-test-utils": "workspace:*",
     "@changesets/changelog-github": "^0.3.0",
diff --git a/packages/c-accordion/src/index.tsx b/packages/c-accordion/src/index.tsx
index 50cdb75a..4b6d221d 100644
--- a/packages/c-accordion/src/index.tsx
+++ b/packages/c-accordion/src/index.tsx
@@ -4,7 +4,6 @@ export {
   CAccordionIcon,
   CAccordionItem,
   CAccordionPanel,
-  ExpandedValues,
 } from "./accordion"
 
 export type {
@@ -15,4 +14,5 @@ export type {
   CAccordionItemProps,
   CAccordionPanelProps,
   CAccordionProps,
+  ExpandedValues,
 } from "./accordion"
diff --git a/packages/c-accordion/tests/__snapshots__/accordion.test.tsx.snap b/packages/c-accordion/tests/__snapshots__/accordion.test.tsx.snap
index 3831411f..efc061bb 100644
--- a/packages/c-accordion/tests/__snapshots__/accordion.test.tsx.snap
+++ b/packages/c-accordion/tests/__snapshots__/accordion.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CAccordion /> component should render properly 1`] = `
 <DocumentFragment>
   <div
-    class="css-rcmwhh"
+    class="chakra-rcmwhh"
   >
     <div
       data-part="root"
@@ -11,7 +11,7 @@ exports[`<CAccordion /> component should render properly 1`] = `
       id="accordion:EMPTY_STRING"
     >
       <div
-        class="css-17mg6aq"
+        class="chakra-17mg6aq"
         data-part="item"
         data-scope="accordion"
         id="accordion:EMPTY_STRING:item:accordion-item-undefined"
@@ -20,7 +20,7 @@ exports[`<CAccordion /> component should render properly 1`] = `
           aria-controls="accordion:EMPTY_STRING:content:accordion-item-undefined"
           aria-disabled="false"
           aria-expanded="false"
-          class="css-1oqzxfr"
+          class="chakra-1oqzxfr"
           data-ownedby="accordion:EMPTY_STRING"
           data-part="trigger"
           data-scope="accordion"
@@ -44,7 +44,7 @@ exports[`<CAccordion /> component should render properly 1`] = `
           </c-v-stack>
           <svg
             aria-hidden="true"
-            class="chakra-icon css-iyv31w"
+            class="chakra-icon chakra-iyv31w"
             element="c-accordion-item"
             focusable="false"
             viewBox="0 0 24 24"
@@ -56,12 +56,12 @@ exports[`<CAccordion /> component should render properly 1`] = `
           </svg>
         </button>
         <div
-          class="css-0"
+          class="chakra-0"
           style="transform: translateZ(0px); overflow: hidden; height: 0px; opacity: 0;"
         >
           <div
             aria-labelledby="accordion:EMPTY_STRING:trigger:accordion-item-undefined"
-            class="css-13d8nyx"
+            class="chakra-13d8nyx"
             data-part="content"
             data-scope="accordion"
             id="accordion:EMPTY_STRING:content:accordion-item-undefined"
@@ -72,7 +72,7 @@ exports[`<CAccordion /> component should render properly 1`] = `
         </div>
       </div>
       <div
-        class="css-17mg6aq"
+        class="chakra-17mg6aq"
         data-part="item"
         data-scope="accordion"
         id="accordion:EMPTY_STRING:item:accordion-item-1"
@@ -81,7 +81,7 @@ exports[`<CAccordion /> component should render properly 1`] = `
           aria-controls="accordion:EMPTY_STRING:content:accordion-item-1"
           aria-disabled="false"
           aria-expanded="false"
-          class="css-1oqzxfr"
+          class="chakra-1oqzxfr"
           data-ownedby="accordion:EMPTY_STRING"
           data-part="trigger"
           data-scope="accordion"
@@ -105,7 +105,7 @@ exports[`<CAccordion /> component should render properly 1`] = `
           </c-v-stack>
           <svg
             aria-hidden="true"
-            class="chakra-icon css-iyv31w"
+            class="chakra-icon chakra-iyv31w"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -116,12 +116,12 @@ exports[`<CAccordion /> component should render properly 1`] = `
           </svg>
         </button>
         <div
-          class="css-0"
+          class="chakra-0"
           style="transform: translateZ(0px); overflow: hidden; height: 0px; opacity: 0;"
         >
           <div
             aria-labelledby="accordion:EMPTY_STRING:trigger:accordion-item-1"
-            class="css-13d8nyx"
+            class="chakra-13d8nyx"
             data-part="content"
             data-scope="accordion"
             id="accordion:EMPTY_STRING:content:accordion-item-1"
@@ -132,7 +132,7 @@ exports[`<CAccordion /> component should render properly 1`] = `
         </div>
       </div>
       <div
-        class="css-17mg6aq"
+        class="chakra-17mg6aq"
         data-part="item"
         data-scope="accordion"
         id="accordion:EMPTY_STRING:item:accordion-item-2"
@@ -141,7 +141,7 @@ exports[`<CAccordion /> component should render properly 1`] = `
           aria-controls="accordion:EMPTY_STRING:content:accordion-item-2"
           aria-disabled="false"
           aria-expanded="false"
-          class="css-1oqzxfr"
+          class="chakra-1oqzxfr"
           data-ownedby="accordion:EMPTY_STRING"
           data-part="trigger"
           data-scope="accordion"
@@ -165,7 +165,7 @@ exports[`<CAccordion /> component should render properly 1`] = `
           </c-v-stack>
           <svg
             aria-hidden="true"
-            class="chakra-icon css-iyv31w"
+            class="chakra-icon chakra-iyv31w"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -176,12 +176,12 @@ exports[`<CAccordion /> component should render properly 1`] = `
           </svg>
         </button>
         <div
-          class="css-0"
+          class="chakra-0"
           style="transform: translateZ(0px); overflow: hidden; height: 0px; opacity: 0;"
         >
           <div
             aria-labelledby="accordion:EMPTY_STRING:trigger:accordion-item-2"
-            class="css-13d8nyx"
+            class="chakra-13d8nyx"
             data-part="content"
             data-scope="accordion"
             id="accordion:EMPTY_STRING:content:accordion-item-2"
diff --git a/packages/c-avatar/tests/__snapshots__/c-avatar-badge.test.ts.snap b/packages/c-avatar/tests/__snapshots__/c-avatar-badge.test.ts.snap
index 1850d411..e3b665e8 100644
--- a/packages/c-avatar/tests/__snapshots__/c-avatar-badge.test.ts.snap
+++ b/packages/c-avatar/tests/__snapshots__/c-avatar-badge.test.ts.snap
@@ -3,17 +3,17 @@
 exports[`CAvatarBadge renders badge without parameters 1`] = `
 <DocumentFragment>
   <span
-    class="chakra-avatar css-1prtvd5"
+    class="chakra-avatar chakra-1prtvd5"
   >
     <div
       aria-label="Evan You"
-      class="css-uo84k3"
+      class="chakra-uo84k3"
       role="img"
     >
       EY
     </div>
     <div
-      class="chakra-avatar__badge css-2b36mb"
+      class="chakra-avatar__badge chakra-2b36mb"
     />
   </span>
 </DocumentFragment>
diff --git a/packages/c-avatar/tests/__snapshots__/c-avatar-group.test.ts.snap b/packages/c-avatar/tests/__snapshots__/c-avatar-group.test.ts.snap
index a05e2ec4..988e9b6f 100644
--- a/packages/c-avatar/tests/__snapshots__/c-avatar-group.test.ts.snap
+++ b/packages/c-avatar/tests/__snapshots__/c-avatar-group.test.ts.snap
@@ -3,16 +3,16 @@
 exports[`CAvatarGroup does not render number if max is higher than avatars 1`] = `
 <DocumentFragment>
   <div
-    class="chakra-avatar__group css-1rs5v3u"
+    class="chakra-avatar__group chakra-1rs5v3u"
     role="group"
   >
     <!---->
     <span
-      class="chakra-avatar css-1exxn2a"
+      class="chakra-avatar chakra-1exxn2a"
     >
       <div
         aria-label="Jonathan Bakebwa"
-        class="css-uo84k3"
+        class="chakra-uo84k3"
         role="img"
       >
         JB
@@ -20,11 +20,11 @@ exports[`CAvatarGroup does not render number if max is higher than avatars 1`] =
       <!---->
     </span>
     <span
-      class="chakra-avatar css-1c4bfld"
+      class="chakra-avatar chakra-1c4bfld"
     >
       <div
         aria-label="Sarah Drasner"
-        class="css-uo84k3"
+        class="chakra-uo84k3"
         role="img"
       >
         SD
@@ -32,11 +32,11 @@ exports[`CAvatarGroup does not render number if max is higher than avatars 1`] =
       <!---->
     </span>
     <span
-      class="chakra-avatar css-ors11u"
+      class="chakra-avatar chakra-ors11u"
     >
       <div
         aria-label="Anthony Fu"
-        class="css-uo84k3"
+        class="chakra-uo84k3"
         role="img"
       >
         AF
@@ -44,11 +44,11 @@ exports[`CAvatarGroup does not render number if max is higher than avatars 1`] =
       <!---->
     </span>
     <span
-      class="chakra-avatar css-x22y92"
+      class="chakra-avatar chakra-x22y92"
     >
       <div
         aria-label="Evan You"
-        class="css-uo84k3"
+        class="chakra-uo84k3"
         role="img"
       >
         EY
@@ -62,16 +62,16 @@ exports[`CAvatarGroup does not render number if max is higher than avatars 1`] =
 exports[`CAvatarGroup does not render number if max is reached 1`] = `
 <DocumentFragment>
   <div
-    class="chakra-avatar__group css-1rs5v3u"
+    class="chakra-avatar__group chakra-1rs5v3u"
     role="group"
   >
     <!---->
     <span
-      class="chakra-avatar css-1exxn2a"
+      class="chakra-avatar chakra-1exxn2a"
     >
       <div
         aria-label="Jonathan Bakebwa"
-        class="css-uo84k3"
+        class="chakra-uo84k3"
         role="img"
       >
         JB
@@ -79,11 +79,11 @@ exports[`CAvatarGroup does not render number if max is reached 1`] = `
       <!---->
     </span>
     <span
-      class="chakra-avatar css-1c4bfld"
+      class="chakra-avatar chakra-1c4bfld"
     >
       <div
         aria-label="Sarah Drasner"
-        class="css-uo84k3"
+        class="chakra-uo84k3"
         role="img"
       >
         SD
@@ -91,11 +91,11 @@ exports[`CAvatarGroup does not render number if max is reached 1`] = `
       <!---->
     </span>
     <span
-      class="chakra-avatar css-ors11u"
+      class="chakra-avatar chakra-ors11u"
     >
       <div
         aria-label="Anthony Fu"
-        class="css-uo84k3"
+        class="chakra-uo84k3"
         role="img"
       >
         AF
@@ -103,11 +103,11 @@ exports[`CAvatarGroup does not render number if max is reached 1`] = `
       <!---->
     </span>
     <span
-      class="chakra-avatar css-x22y92"
+      class="chakra-avatar chakra-x22y92"
     >
       <div
         aria-label="Evan You"
-        class="css-uo84k3"
+        class="chakra-uo84k3"
         role="img"
       >
         EY
@@ -121,20 +121,20 @@ exports[`CAvatarGroup does not render number if max is reached 1`] = `
 exports[`CAvatarGroup renders group with 2 by default 1`] = `
 <DocumentFragment>
   <div
-    class="chakra-avatar__group css-1rs5v3u"
+    class="chakra-avatar__group chakra-1rs5v3u"
     role="group"
   >
     <span
-      class="chakra-avatar__excess css-1d6omom"
+      class="chakra-avatar__excess chakra-1d6omom"
     >
       +2
     </span>
     <span
-      class="chakra-avatar css-1xmzc4h"
+      class="chakra-avatar chakra-1xmzc4h"
     >
       <div
         aria-label="Anthony Fu"
-        class="css-uo84k3"
+        class="chakra-uo84k3"
         role="img"
       >
         AF
@@ -142,11 +142,11 @@ exports[`CAvatarGroup renders group with 2 by default 1`] = `
       <!---->
     </span>
     <span
-      class="chakra-avatar css-x22y92"
+      class="chakra-avatar chakra-x22y92"
     >
       <div
         aria-label="Evan You"
-        class="css-uo84k3"
+        class="chakra-uo84k3"
         role="img"
       >
         EY
@@ -160,20 +160,20 @@ exports[`CAvatarGroup renders group with 2 by default 1`] = `
 exports[`CAvatarGroup renders group with max prop passed 1`] = `
 <DocumentFragment>
   <div
-    class="chakra-avatar__group css-1rs5v3u"
+    class="chakra-avatar__group chakra-1rs5v3u"
     role="group"
   >
     <span
-      class="chakra-avatar__excess css-1d6omom"
+      class="chakra-avatar__excess chakra-1d6omom"
     >
       +1
     </span>
     <span
-      class="chakra-avatar css-1cd629q"
+      class="chakra-avatar chakra-1cd629q"
     >
       <div
         aria-label="Sarah Drasner"
-        class="css-uo84k3"
+        class="chakra-uo84k3"
         role="img"
       >
         SD
@@ -181,11 +181,11 @@ exports[`CAvatarGroup renders group with max prop passed 1`] = `
       <!---->
     </span>
     <span
-      class="chakra-avatar css-ors11u"
+      class="chakra-avatar chakra-ors11u"
     >
       <div
         aria-label="Anthony Fu"
-        class="css-uo84k3"
+        class="chakra-uo84k3"
         role="img"
       >
         AF
@@ -193,11 +193,11 @@ exports[`CAvatarGroup renders group with max prop passed 1`] = `
       <!---->
     </span>
     <span
-      class="chakra-avatar css-x22y92"
+      class="chakra-avatar chakra-x22y92"
     >
       <div
         aria-label="Evan You"
-        class="css-uo84k3"
+        class="chakra-uo84k3"
         role="img"
       >
         EY
diff --git a/packages/c-avatar/tests/__snapshots__/c-avatar.test.ts.snap b/packages/c-avatar/tests/__snapshots__/c-avatar.test.ts.snap
index 9b593854..5fc4434e 100644
--- a/packages/c-avatar/tests/__snapshots__/c-avatar.test.ts.snap
+++ b/packages/c-avatar/tests/__snapshots__/c-avatar.test.ts.snap
@@ -3,11 +3,11 @@
 exports[`CAvatar renders initials when name is specified 1`] = `
 <DocumentFragment>
   <span
-    class="chakra-avatar css-hdpo4i"
+    class="chakra-avatar chakra-hdpo4i"
   >
     <div
       aria-label="Hello World"
-      class="css-uo84k3"
+      class="chakra-uo84k3"
       role="img"
     >
       HW
@@ -20,10 +20,10 @@ exports[`CAvatar renders initials when name is specified 1`] = `
 exports[`CAvatar renders properly with default avatar svg by default 1`] = `
 <DocumentFragment>
   <span
-    class="chakra-avatar css-lum6am"
+    class="chakra-avatar chakra-lum6am"
   >
     <svg
-      class="chakra-avatar__svg css-16ite8i"
+      class="chakra-avatar__svg chakra-16ite8i"
       viewBox="0 0 128 128"
     >
       <path
diff --git a/packages/c-checkbox/tests/__snapshots__/c-checkbox.test.ts.snap b/packages/c-checkbox/tests/__snapshots__/c-checkbox.test.ts.snap
index 4671ba54..394c6d0e 100644
--- a/packages/c-checkbox/tests/__snapshots__/c-checkbox.test.ts.snap
+++ b/packages/c-checkbox/tests/__snapshots__/c-checkbox.test.ts.snap
@@ -3,10 +3,10 @@
 exports[`should render properly 1`] = `
 <DocumentFragment>
   <div
-    class="css-msv88v"
+    class="chakra-msv88v"
   >
     <label
-      class="chakra-checkbox css-1tw369l"
+      class="chakra-checkbox chakra-1tw369l"
       data-part="root"
       data-scope="checkbox"
       for="input-chakra-checkbox-EMPTY_STRING"
@@ -25,13 +25,13 @@ exports[`should render properly 1`] = `
       />
       <span
         aria-hidden="true"
-        class="chakra-checkbox__control css-drpdfl"
+        class="chakra-checkbox__control chakra-drpdfl"
         data-part="control"
         data-scope="checkbox"
         id="control-chakra-checkbox-EMPTY_STRING"
       >
         <svg
-          class="css-1mg6af5"
+          class="chakra-1mg6af5"
           style="fill: none; stroke-width: 2; stroke: currentColor; stroke-dasharray: 16;"
           viewBox="0 0 12 10"
         >
diff --git a/packages/c-close-button/tests/__snapshots__/c-close-button.test.ts.snap b/packages/c-close-button/tests/__snapshots__/c-close-button.test.ts.snap
index ddafff97..8e28dcb1 100644
--- a/packages/c-close-button/tests/__snapshots__/c-close-button.test.ts.snap
+++ b/packages/c-close-button/tests/__snapshots__/c-close-button.test.ts.snap
@@ -4,13 +4,13 @@ exports[`should render properly 1`] = `
 <DocumentFragment>
   <button
     aria-label="Close"
-    class="chakra-icon-button css-1mrg54v"
+    class="chakra-icon-button chakra-1mrg54v"
     data-testid="closebutton"
     type="button"
   >
     <svg
       aria-hidden="true"
-      class="chakra-icon css-13otjrl"
+      class="chakra-icon chakra-13otjrl"
       focusable="false"
       viewBox="0 0 24 24"
     >
diff --git a/packages/c-code/tests/__snapshots__/c-code.test.ts.snap b/packages/c-code/tests/__snapshots__/c-code.test.ts.snap
index 78268dfc..3a654ac4 100644
--- a/packages/c-code/tests/__snapshots__/c-code.test.ts.snap
+++ b/packages/c-code/tests/__snapshots__/c-code.test.ts.snap
@@ -3,27 +3,27 @@
 exports[`should render properly 1`] = `
 <DocumentFragment>
   <code
-    class="css-jzsne5"
+    class="chakra-jzsne5"
   >
     hello world
   </code>
   <code
-    class="css-3kxaoo"
+    class="chakra-3kxaoo"
   >
      hello world, red 
   </code>
   <code
-    class="css-19o3a2"
+    class="chakra-19o3a2"
   >
      hello world, green 
   </code>
   <code
-    class="css-1xm0kle"
+    class="chakra-1xm0kle"
   >
      hello world, yellow 
   </code>
   <code
-    class="css-1ezro68"
+    class="chakra-1ezro68"
   >
      hello world, teal 
   </code>
diff --git a/packages/c-icon/tests/__snapshots__/c-icon.test.ts.snap b/packages/c-icon/tests/__snapshots__/c-icon.test.ts.snap
index b2b09f9b..0f66c9a1 100644
--- a/packages/c-icon/tests/__snapshots__/c-icon.test.ts.snap
+++ b/packages/c-icon/tests/__snapshots__/c-icon.test.ts.snap
@@ -3,7 +3,7 @@
 exports[`should render custom icon properly 1`] = `
 <DocumentFragment>
   <svg
-    class="chakra-icon css-stgirh"
+    class="chakra-icon chakra-stgirh"
     focusable="false"
     viewBox="0 0 496 512"
   >
@@ -19,7 +19,7 @@ exports[`should render custom icon properly 1`] = `
 exports[`should render properly 1`] = `
 <DocumentFragment>
   <svg
-    class="chakra-icon css-13otjrl"
+    class="chakra-icon chakra-13otjrl"
     focusable="false"
     viewBox="0 0 24 24"
   >
diff --git a/packages/c-input/tests/__snapshots__/c-input.test.tsx.snap b/packages/c-input/tests/__snapshots__/c-input.test.tsx.snap
index 42cf3cf6..a3c0261a 100644
--- a/packages/c-input/tests/__snapshots__/c-input.test.tsx.snap
+++ b/packages/c-input/tests/__snapshots__/c-input.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CInput /> should render properly 1`] = `
 <DocumentFragment>
   <input
-    class="chakra-input css-1xqxqck"
+    class="chakra-input chakra-1xqxqck"
   />
 </DocumentFragment>
 `;
diff --git a/packages/c-pin-input/tests/__snapshots__/c-pin-input.test.ts.snap b/packages/c-pin-input/tests/__snapshots__/c-pin-input.test.ts.snap
index 490a71a9..b8539684 100644
--- a/packages/c-pin-input/tests/__snapshots__/c-pin-input.test.ts.snap
+++ b/packages/c-pin-input/tests/__snapshots__/c-pin-input.test.ts.snap
@@ -3,7 +3,7 @@
 exports[`CPinInput should render properly 1`] = `
 <DocumentFragment>
   <div
-    class="chakra-pin-input css-0"
+    class="chakra-pin-input chakra-0"
     data-complete=""
     data-part="root"
     data-scope="pin-input"
@@ -13,7 +13,7 @@ exports[`CPinInput should render properly 1`] = `
       aria-label="pin code 1 of 0"
       autocapitalize="none"
       autocomplete="off"
-      class="chakra-pin-input-field css-j9nk9"
+      class="chakra-pin-input-field chakra-j9nk9"
       data-complete=""
       data-ownedby="pin-input:0"
       data-part="input"
@@ -28,7 +28,7 @@ exports[`CPinInput should render properly 1`] = `
       aria-label="pin code 2 of 0"
       autocapitalize="none"
       autocomplete="off"
-      class="chakra-pin-input-field css-j9nk9"
+      class="chakra-pin-input-field chakra-j9nk9"
       data-complete=""
       data-ownedby="pin-input:0"
       data-part="input"
@@ -43,7 +43,7 @@ exports[`CPinInput should render properly 1`] = `
       aria-label="pin code 3 of 0"
       autocapitalize="none"
       autocomplete="off"
-      class="chakra-pin-input-field css-j9nk9"
+      class="chakra-pin-input-field chakra-j9nk9"
       data-complete=""
       data-ownedby="pin-input:0"
       data-part="input"
diff --git a/packages/c-popper/package.json b/packages/c-popper/package.json
index 4bbd4bfd..003281ac 100644
--- a/packages/c-popper/package.json
+++ b/packages/c-popper/package.json
@@ -30,7 +30,7 @@
     "build:fast": "tsup",
     "types:check": "tsc --noEmit",
     "dev": "tsup --watch",
-    "build:types": "tsup src --dts-only"
+    "build:types": "tsup --dts-only"
   },
   "dependencies": {
     "@chakra-ui/utils": "2.0.15",
diff --git a/packages/c-popper/src/create-popper.ts b/packages/c-popper/src/create-popper.ts
index f574109e..11e96842 100644
--- a/packages/c-popper/src/create-popper.ts
+++ b/packages/c-popper/src/create-popper.ts
@@ -15,7 +15,7 @@ import {
   positionArrow,
   transformOrigin,
 } from "./modifiers"
-import { getEventListenerOptions } from "./utils"
+import { getEventListenerOptions } from "./dom.utils"
 
 /* -------------------------------------------------------------------------------------------------
   We're initializing our own `createPopper` function with our opinionated defaults to
diff --git a/packages/c-popper/src/utils.ts b/packages/c-popper/src/dom.utils.ts
similarity index 100%
rename from packages/c-popper/src/utils.ts
rename to packages/c-popper/src/dom.utils.ts
diff --git a/packages/c-popper/src/index.tsx b/packages/c-popper/src/index.tsx
index b9f99fc2..1307c57f 100644
--- a/packages/c-popper/src/index.tsx
+++ b/packages/c-popper/src/index.tsx
@@ -1,4 +1,4 @@
 export { Placement, usePopper } from "./use-popper"
-export { popperCSSVars } from "./utils"
+export { popperCSSVars } from "./dom.utils"
 
 export type { UsePopperOptions, UsePopperReturn } from "./use-popper"
diff --git a/packages/c-popper/src/modifiers.ts b/packages/c-popper/src/modifiers.ts
index 531c1180..3baa3658 100644
--- a/packages/c-popper/src/modifiers.ts
+++ b/packages/c-popper/src/modifiers.ts
@@ -4,7 +4,7 @@ import {
   getBoxShadow,
   toTransformOrigin,
   popperCSSVars as cssVars,
-} from "./utils"
+} from "./dom.utils"
 
 /* -------------------------------------------------------------------------------------------------
  The match width modifier sets the popper width to match the reference.
@@ -30,7 +30,7 @@ export const matchWidth: Modifier<"matchWidth", any> = {
 /* -------------------------------------------------------------------------------------------------
   The transform origin modifier sets the css `transformOrigin` value of the popper
   based on the dynamic placement state of the popper.
-  
+
   Useful when we need to animate/transition the popper.
 * -----------------------------------------------------------------------------------------------*/
 
diff --git a/packages/c-skip-nav/tests/__snapshots__/c-skip-nav.test.ts.snap b/packages/c-skip-nav/tests/__snapshots__/c-skip-nav.test.ts.snap
index d309e625..50236005 100644
--- a/packages/c-skip-nav/tests/__snapshots__/c-skip-nav.test.ts.snap
+++ b/packages/c-skip-nav/tests/__snapshots__/c-skip-nav.test.ts.snap
@@ -3,7 +3,7 @@
 exports[`CSkipNavContent should render properly 1`] = `
 <DocumentFragment>
   <div
-    class="css-0"
+    class="chakra-0"
     data-testid="chakra-skip-nav"
     id="chakra-skip-nav"
     tabindex="-1"
@@ -14,7 +14,7 @@ exports[`CSkipNavContent should render properly 1`] = `
 exports[`CSkipNavLink should render properly 1`] = `
 <DocumentFragment>
   <a
-    class="css-1awf05p"
+    class="chakra-1awf05p"
     href="#chakra-skip-nav"
   />
 </DocumentFragment>
diff --git a/packages/c-tag/tests/__snapshots__/c-tag.test.ts.snap b/packages/c-tag/tests/__snapshots__/c-tag.test.ts.snap
index 528f0c0f..d69ff447 100644
--- a/packages/c-tag/tests/__snapshots__/c-tag.test.ts.snap
+++ b/packages/c-tag/tests/__snapshots__/c-tag.test.ts.snap
@@ -4,7 +4,7 @@ exports[`CTag renders base tag properly 1`] = `
 <DocumentFragment>
   <span
     aria-label="tag"
-    class="chakra-tag css-uv65rg"
+    class="chakra-tag chakra-uv65rg"
   >
     Sample tag
   </span>
@@ -15,10 +15,10 @@ exports[`CTag renders base tag with c-label properly 1`] = `
 <DocumentFragment>
   <span
     aria-label="tag"
-    class="chakra-tag css-uv65rg"
+    class="chakra-tag chakra-uv65rg"
   >
     <span
-      class="css-1vp3zs1"
+      class="chakra-1vp3zs1"
     >
       Sample tag
     </span>
@@ -30,10 +30,10 @@ exports[`CTag renders tag with left icon properly 1`] = `
 <DocumentFragment>
   <span
     aria-label="tag"
-    class="chakra-tag css-uv65rg"
+    class="chakra-tag chakra-uv65rg"
   >
     <svg
-      class="chakra-icon css-1iuf2uu"
+      class="chakra-icon chakra-1iuf2uu"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -73,7 +73,7 @@ exports[`CTag renders tag with left icon properly 1`] = `
   
     </svg>
     <span
-      class="css-1vp3zs1"
+      class="chakra-1vp3zs1"
     >
       Sample tag
     </span>
@@ -85,21 +85,21 @@ exports[`CTag renders with close button properly 1`] = `
 <DocumentFragment>
   <span
     aria-label="tag"
-    class="chakra-tag css-uv65rg"
+    class="chakra-tag chakra-uv65rg"
   >
     <span
-      class="css-1vp3zs1"
+      class="chakra-1vp3zs1"
     >
       Sample tag
     </span>
     <button
       aria-label="close"
-      class="css-piepz9"
+      class="chakra-piepz9"
       type="button"
     >
       <svg
         attrs="[object Object]"
-        class="chakra-icon css-1md6f3y"
+        class="chakra-icon chakra-1md6f3y"
         emit="(event, ...args) => instance.emit(event, ...args)"
         expose="exposed => {
         {
@@ -141,22 +141,22 @@ exports[`CTag renders with disabled button properly 1`] = `
 <DocumentFragment>
   <span
     aria-label="tag"
-    class="chakra-tag css-uv65rg"
+    class="chakra-tag chakra-uv65rg"
   >
     <span
-      class="css-1vp3zs1"
+      class="chakra-1vp3zs1"
     >
       Sample tag
     </span>
     <button
       aria-label="close"
-      class="css-piepz9"
+      class="chakra-piepz9"
       disabled=""
       type="button"
     >
       <svg
         attrs="[object Object]"
-        class="chakra-icon css-1md6f3y"
+        class="chakra-icon chakra-1md6f3y"
         emit="(event, ...args) => instance.emit(event, ...args)"
         expose="exposed => {
         {
@@ -198,10 +198,10 @@ exports[`CTag renders with left icon and close button 1`] = `
 <DocumentFragment>
   <span
     aria-label="tag"
-    class="chakra-tag css-uv65rg"
+    class="chakra-tag chakra-uv65rg"
   >
     <svg
-      class="chakra-icon css-1iuf2uu"
+      class="chakra-icon chakra-1iuf2uu"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -241,18 +241,18 @@ exports[`CTag renders with left icon and close button 1`] = `
   
     </svg>
     <span
-      class="css-1vp3zs1"
+      class="chakra-1vp3zs1"
     >
       Sample tag
     </span>
     <button
       aria-label="close"
-      class="css-piepz9"
+      class="chakra-piepz9"
       type="button"
     >
       <svg
         attrs="[object Object]"
-        class="chakra-icon css-1md6f3y"
+        class="chakra-icon chakra-1md6f3y"
         emit="(event, ...args) => instance.emit(event, ...args)"
         expose="exposed => {
         {
@@ -294,15 +294,15 @@ exports[`CTag renders with right icon properly 1`] = `
 <DocumentFragment>
   <span
     aria-label="tag"
-    class="chakra-tag css-uv65rg"
+    class="chakra-tag chakra-uv65rg"
   >
     <span
-      class="css-1vp3zs1"
+      class="chakra-1vp3zs1"
     >
       Sample tag
     </span>
     <svg
-      class="chakra-icon css-1odll4e"
+      class="chakra-icon chakra-1odll4e"
       focusable="false"
       viewBox="0 0 24 24"
     >
diff --git a/packages/c-visually-hidden/src/c-visually-hidden.ts b/packages/c-visually-hidden/src/c-visually-hidden.ts
index 675c21ae..5705f420 100644
--- a/packages/c-visually-hidden/src/c-visually-hidden.ts
+++ b/packages/c-visually-hidden/src/c-visually-hidden.ts
@@ -1,5 +1,5 @@
 import { chakra } from "@chakra-ui/vue-system"
-import { CSSObject } from "@emotion/css"
+import type { CSSObject } from "@emotion/css"
 
 /**
  * Styles to visually hide an element
diff --git a/packages/layout/tests/__snapshots__/layout.test.ts.snap b/packages/layout/tests/__snapshots__/layout.test.ts.snap
index 3e4881e7..604a5639 100644
--- a/packages/layout/tests/__snapshots__/layout.test.ts.snap
+++ b/packages/layout/tests/__snapshots__/layout.test.ts.snap
@@ -3,7 +3,7 @@
 exports[`<CAspectRatio /> should render properly 1`] = `
 <DocumentFragment>
   <div
-    class="chakra-aspect-ratio css-w9t1xc"
+    class="chakra-aspect-ratio chakra-w9t1xc"
   >
     <img
       alt="img"
@@ -16,7 +16,7 @@ exports[`<CAspectRatio /> should render properly 1`] = `
 exports[`<CBadge /> should render properly 1`] = `
 <DocumentFragment>
   <div
-    class="chakra-badge css-16bfjvf"
+    class="chakra-badge chakra-16bfjvf"
   >
     this is a badge
   </div>
@@ -26,12 +26,12 @@ exports[`<CBadge /> should render properly 1`] = `
 exports[`<CBox /> should render properly 1`] = `
 <DocumentFragment>
   <div
-    class="chakra-box css-2sy3sl"
+    class="chakra-box chakra-2sy3sl"
   >
      This is a div 
   </div>
   <section
-    class="chakra-box css-2sy3sl"
+    class="chakra-box chakra-2sy3sl"
   >
      This is a box with as="section" 
   </section>
@@ -41,7 +41,7 @@ exports[`<CBox /> should render properly 1`] = `
 exports[`<CCenter /> should render properly 1`] = `
 <DocumentFragment>
   <div
-    class="chakra-center css-40w18w"
+    class="chakra-center chakra-40w18w"
   >
      C 
   </div>
@@ -51,7 +51,7 @@ exports[`<CCenter /> should render properly 1`] = `
 exports[`<CContainer /> should render properly 1`] = `
 <DocumentFragment>
   <div
-    class="chakra-container css-1poer1"
+    class="chakra-container chakra-1poer1"
   >
      container 
   </div>
@@ -62,14 +62,14 @@ exports[`<CDivider /> should render properly 1`] = `
 <DocumentFragment>
   <hr
     aria-orientation="horizontal"
-    class="chakra-divider css-1y71u2e"
+    class="chakra-divider chakra-1y71u2e"
   />
   <div
-    class="chakra-center css-1yj0ggl"
+    class="chakra-center chakra-1yj0ggl"
   >
     <hr
       aria-orientation="vertical"
-      class="chakra-divider css-1psxsf8"
+      class="chakra-divider chakra-1psxsf8"
     />
   </div>
 </DocumentFragment>
@@ -78,48 +78,48 @@ exports[`<CDivider /> should render properly 1`] = `
 exports[`<CGrid /> & <CGridItem /> should render properly 1`] = `
 <DocumentFragment>
   <div
-    class="chakra-grid css-ssvt16"
+    class="chakra-grid chakra-ssvt16"
   >
     <div
-      class="chakra-box css-62u0by"
+      class="chakra-box chakra-62u0by"
     >
       <!---->
     </div>
     <div
-      class="chakra-box css-62u0by"
+      class="chakra-box chakra-62u0by"
     >
       <!---->
     </div>
     <div
-      class="chakra-box css-62u0by"
+      class="chakra-box chakra-62u0by"
     >
       <!---->
     </div>
     <div
-      class="chakra-box css-62u0by"
+      class="chakra-box chakra-62u0by"
     >
       <!---->
     </div>
     <div
-      class="chakra-box css-62u0by"
+      class="chakra-box chakra-62u0by"
     >
       <!---->
     </div>
   </div>
   <div
-    class="chakra-grid css-85u0uj"
+    class="chakra-grid chakra-85u0uj"
   >
     <div
-      class="chakra-grid__item css-1q1m6d7"
+      class="chakra-grid__item chakra-1q1m6d7"
     />
     <div
-      class="chakra-grid__item css-1qvc0pb"
+      class="chakra-grid__item chakra-1qvc0pb"
     />
     <div
-      class="chakra-grid__item css-1qvc0pb"
+      class="chakra-grid__item chakra-1qvc0pb"
     />
     <div
-      class="chakra-grid__item css-1anmq07"
+      class="chakra-grid__item chakra-1anmq07"
     />
   </div>
 </DocumentFragment>
@@ -128,45 +128,45 @@ exports[`<CGrid /> & <CGridItem /> should render properly 1`] = `
 exports[`<CHeading /> should render properly 1`] = `
 <DocumentFragment>
   <div
-    class="chakra-stack css-17kdbol"
+    class="chakra-stack chakra-17kdbol"
   >
     <h1
-      class="chakra-heading css-cule"
+      class="chakra-heading chakra-cule"
     >
       (4xl) In love with Vue & Vite & Nuxt
     </h1>
     <h2
-      class="chakra-heading css-15xpjkx"
+      class="chakra-heading chakra-15xpjkx"
     >
        (3xl) In love with Vue & Vite & Nuxt
     </h2>
     <h2
-      class="chakra-heading css-1dpg06m"
+      class="chakra-heading chakra-1dpg06m"
     >
       (2xl) In love with Vue & Vite & Nuxt
     </h2>
     <h2
-      class="chakra-heading css-ueokap"
+      class="chakra-heading chakra-ueokap"
     >
        (xl) In love with Vue & Vite & Nuxt 
     </h2>
     <h3
-      class="chakra-heading css-1q5o9wg"
+      class="chakra-heading chakra-1q5o9wg"
     >
        (lg) In love with Vue & Vite & Nuxt 
     </h3>
     <h4
-      class="chakra-heading css-528rta"
+      class="chakra-heading chakra-528rta"
     >
        (md) In love with Vue & Vite & Nuxt 
     </h4>
     <h5
-      class="chakra-heading css-s5h6tf"
+      class="chakra-heading chakra-s5h6tf"
     >
        (sm) In love with Vue & Vite & Nuxt 
     </h5>
     <h6
-      class="chakra-heading css-ngsgu1"
+      class="chakra-heading chakra-ngsgu1"
     >
        (xs) In love with Vue & Vite & Nuxt 
     </h6>
@@ -178,13 +178,13 @@ exports[`<CKbd /> should render properly 1`] = `
 <DocumentFragment>
   <span>
     <kbd
-      class="chakra-kbd css-o84h17"
+      class="chakra-kbd chakra-o84h17"
     >
       shift
     </kbd>
      + 
     <kbd
-      class="chakra-kbd css-o84h17"
+      class="chakra-kbd chakra-o84h17"
     >
       H
     </kbd>
@@ -195,12 +195,12 @@ exports[`<CKbd /> should render properly 1`] = `
 exports[`<CLink /> should render properly 1`] = `
 <DocumentFragment>
   <a
-    class="chakra-link css-8jj5m5"
+    class="chakra-link chakra-8jj5m5"
   >
     CLink
   </a>
   <a
-    class="chakra-link css-8jj5m5"
+    class="chakra-link chakra-8jj5m5"
     rel="noopener noreferrer"
     target="_blank"
   >
@@ -212,13 +212,13 @@ exports[`<CLink /> should render properly 1`] = `
 exports[`<CLinkBox /> <CLinkOverlay /> should render properly 1`] = `
 <DocumentFragment>
   <article
-    class="chakra-linkbox css-10n1vic"
+    class="chakra-linkbox chakra-10n1vic"
   >
     <h2
-      class="chakra-heading css-1bhhtxl"
+      class="chakra-heading chakra-1bhhtxl"
     >
       <a
-        class="chakra-linkbox__overlay css-1hnz6hu"
+        class="chakra-linkbox__overlay chakra-1hnz6hu"
         href="https://vue.chakra-ui.com"
         rel="noopener noreferrer"
         target="_blank"
@@ -230,7 +230,7 @@ exports[`<CLinkBox /> <CLinkOverlay /> should render properly 1`] = `
        As a side note, using quotation marks around an attribute value is required only if this value is not a valid identifier. 
     </p>
     <a
-      class="chakra-link css-8jj5m5"
+      class="chakra-link chakra-8jj5m5"
       href="https://google.com"
       rel="noopener noreferrer"
       target="_blank"
@@ -244,44 +244,44 @@ exports[`<CLinkBox /> <CLinkOverlay /> should render properly 1`] = `
 exports[`<CList /> <CListItem /> <CUnorderedList /> <COrderedList /> <CListIcon />  should render properly 1`] = `
 <DocumentFragment>
   <ul
-    class="chakra-list css-1dg6mvm"
+    class="chakra-list chakra-1dg6mvm"
     role="list"
   >
     <li
-      class="chakra-list__item css-0"
+      class="chakra-list__item chakra-0"
     >
       Lorem ipsum dolor sit amet
     </li>
     <li
-      class="chakra-list__item css-0"
+      class="chakra-list__item chakra-0"
     >
       Facilisis in pretium nisl aliquet
     </li>
   </ul>
   <ul
-    class="chakra-list css-tu0njr"
+    class="chakra-list chakra-tu0njr"
     role="list"
   >
     <li
-      class="chakra-list__item css-0"
+      class="chakra-list__item chakra-0"
     >
       Lorem ipsum dolor sit amet
     </li>
     <li
-      class="chakra-list__item css-0"
+      class="chakra-list__item chakra-0"
     >
       Consectetur adipiscing elit
     </li>
   </ul>
   <ul
-    class="chakra-list css-155za0w"
+    class="chakra-list chakra-155za0w"
     role="list"
   >
     <li
-      class="chakra-list__item css-0"
+      class="chakra-list__item chakra-0"
     >
       <svg
-        class="chakra-icon css-vg5qi3"
+        class="chakra-icon chakra-vg5qi3"
         focusable="false"
         role="presentation"
         viewBox="0 0 24 24"
@@ -324,10 +324,10 @@ exports[`<CList /> <CListItem /> <CUnorderedList /> <COrderedList /> <CListIcon
        Lorem ipsum dolor sit amet. 
     </li>
     <li
-      class="chakra-list__item css-0"
+      class="chakra-list__item chakra-0"
     >
       <svg
-        class="chakra-icon css-vg5qi3"
+        class="chakra-icon chakra-vg5qi3"
         focusable="false"
         role="presentation"
         viewBox="0 0 24 24"
@@ -376,30 +376,30 @@ exports[`<CList /> <CListItem /> <CUnorderedList /> <COrderedList /> <CListIcon
 exports[`<CSimpleGrid /> should render properly 1`] = `
 <DocumentFragment>
   <ul
-    class="chakra-simple-grid css-12tmpmw"
+    class="chakra-simple-grid chakra-12tmpmw"
   >
     <div
-      class="chakra-box css-9rloc5"
+      class="chakra-box chakra-9rloc5"
     >
       simple 1
     </div>
     <div
-      class="chakra-box css-9rloc5"
+      class="chakra-box chakra-9rloc5"
     >
       simple 2
     </div>
     <div
-      class="chakra-box css-9rloc5"
+      class="chakra-box chakra-9rloc5"
     >
       simple 3
     </div>
     <div
-      class="chakra-box css-9rloc5"
+      class="chakra-box chakra-9rloc5"
     >
       simple 4
     </div>
     <div
-      class="chakra-box css-9rloc5"
+      class="chakra-box chakra-9rloc5"
     >
       simple 5
     </div>
@@ -410,18 +410,18 @@ exports[`<CSimpleGrid /> should render properly 1`] = `
 exports[`<CSpacer /> should render properly 1`] = `
 <DocumentFragment>
   <div
-    class="chakra-flex css-1xhj18k"
+    class="chakra-flex chakra-1xhj18k"
   >
     <div
-      class="chakra-box css-zzdd9b"
+      class="chakra-box chakra-zzdd9b"
     >
        Box 1 
     </div>
     <div
-      class="chakra-spacer css-17xejub"
+      class="chakra-spacer chakra-17xejub"
     />
     <div
-      class="chakra-box css-pp1cg2"
+      class="chakra-box chakra-pp1cg2"
     >
        Box 2 
     </div>
@@ -432,12 +432,12 @@ exports[`<CSpacer /> should render properly 1`] = `
 exports[`<CSquare /> & <CCircle /> should render properly 1`] = `
 <DocumentFragment>
   <div
-    class="chakra-square css-yh3vrj"
+    class="chakra-square chakra-yh3vrj"
   >
      S 
   </div>
   <div
-    class="chakra-circle css-1afsfyy"
+    class="chakra-circle chakra-1afsfyy"
   >
      C 
   </div>
@@ -447,7 +447,7 @@ exports[`<CSquare /> & <CCircle /> should render properly 1`] = `
 exports[`<CStack /> should render properly 1`] = `
 <DocumentFragment>
   <div
-    class="chakra-stack css-n21gh5"
+    class="chakra-stack chakra-n21gh5"
   >
     <div>
       1
@@ -457,7 +457,7 @@ exports[`<CStack /> should render properly 1`] = `
     </div>
   </div>
   <div
-    class="chakra-stack-horizontal css-x9juev"
+    class="chakra-stack-horizontal chakra-x9juev"
   >
     <div>
       1
@@ -467,7 +467,7 @@ exports[`<CStack /> should render properly 1`] = `
     </div>
   </div>
   <div
-    class="chakra-stack-vertical css-n21gh5"
+    class="chakra-stack-vertical chakra-n21gh5"
   >
     <div>
       1
@@ -482,32 +482,32 @@ exports[`<CStack /> should render properly 1`] = `
 exports[`<CText /> should render properly 1`] = `
 <DocumentFragment>
   <p
-    class="chakra-text css-0"
+    class="chakra-text chakra-0"
   >
     normal:
   </p>
   <p
-    class="chakra-text css-n2bes8"
+    class="chakra-text chakra-n2bes8"
   >
     (6xl) In love with Vue & Vite & Nuxt
   </p>
   <p
-    class="chakra-text css-0"
+    class="chakra-text chakra-0"
   >
     truncated:
   </p>
   <p
-    class="chakra-text css-3urtkt"
+    class="chakra-text chakra-3urtkt"
   >
      Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. 
   </p>
   <p
-    class="chakra-text css-0"
+    class="chakra-text chakra-0"
   >
     line clamp:
   </p>
   <p
-    class="chakra-text css-3jijpv"
+    class="chakra-text chakra-3jijpv"
   >
      "The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the English alphabet. Owing to its existence, Chakra was created. 
   </p>
@@ -517,43 +517,43 @@ exports[`<CText /> should render properly 1`] = `
 exports[`<CWrap /> & <CWrapItem /> should render properly 1`] = `
 <DocumentFragment>
   <div
-    class="chakra-wrap css-0"
+    class="chakra-wrap chakra-0"
   >
     <ul
-      class="chakra-wrap__list css-gbdy1k"
+      class="chakra-wrap__list chakra-gbdy1k"
     >
       <li
-        class="chakra-wrap__listItem css-1yp4ln"
+        class="chakra-wrap__listItem chakra-1yp4ln"
       >
         <div
-          class="chakra-center css-58a5xs"
+          class="chakra-center chakra-58a5xs"
         >
            Box 1 
         </div>
       </li>
       <li
-        class="chakra-wrap__listItem css-1yp4ln"
+        class="chakra-wrap__listItem chakra-1yp4ln"
       >
         <div
-          class="chakra-center css-1cf3c28"
+          class="chakra-center chakra-1cf3c28"
         >
            Box 2 
         </div>
       </li>
       <li
-        class="chakra-wrap__listItem css-1yp4ln"
+        class="chakra-wrap__listItem chakra-1yp4ln"
       >
         <div
-          class="chakra-center css-1un2hvj"
+          class="chakra-center chakra-1un2hvj"
         >
            Box 3 
         </div>
       </li>
       <li
-        class="chakra-wrap__listItem css-1yp4ln"
+        class="chakra-wrap__listItem chakra-1yp4ln"
       >
         <div
-          class="chakra-center css-dd3w5r"
+          class="chakra-center chakra-dd3w5r"
         >
            Box 4 
         </div>
diff --git a/packages/styled/src/cache.tsx b/packages/styled/src/cache.tsx
index e8fc31b1..bcc4590b 100644
--- a/packages/styled/src/cache.tsx
+++ b/packages/styled/src/cache.tsx
@@ -1,5 +1,5 @@
 import createCacheImport from "@emotion/cache"
-import { EmotionCache } from "@emotion/utils"
+import type { EmotionCache } from "@emotion/utils"
 import { createContext, canUseDOM } from "@chakra-ui/vue-utils"
 
 export function createCache(...args: Parameters<typeof createCacheImport>) {
diff --git a/packages/system/package.json b/packages/system/package.json
index 313fb783..e81165f6 100644
--- a/packages/system/package.json
+++ b/packages/system/package.json
@@ -29,7 +29,6 @@
     "@chakra-ui/styled-system": "2.5.1",
     "@chakra-ui/utils": "2.0.15",
     "@chakra-ui/vue-utils": "workspace:*",
-    "@emotion/css": "^11.10.5",
     "@emotion/serialize": "1.1.1",
     "lodash.camelcase": "^4.3.0",
     "lodash.kebabcase": "^4.1.1",
@@ -41,6 +40,7 @@
     "vue": "3.2.47"
   },
   "peerDependencies": {
+    "@emotion/css": "^11.10.0",
     "vue": "3.2.47"
   },
   "publishConfig": {
diff --git a/packages/system/src/chakra.tsx b/packages/system/src/chakra.tsx
index 3155430b..dd899926 100644
--- a/packages/system/src/chakra.tsx
+++ b/packages/system/src/chakra.tsx
@@ -29,7 +29,8 @@ import {
   memoizedGet as get,
   Dict,
 } from "@chakra-ui/utils"
-import { cx, css as _css, CSSObject } from "@emotion/css"
+import { cx, css as _css } from "./emotion"
+import type { CSSObject } from "@emotion/css"
 import { domElements, DOMElements } from "./system.utils"
 import { useChakra, useTheme } from "./composables/use-chakra"
 import { extractStyleAttrs } from "@chakra-ui/vue-utils"
diff --git a/packages/system/src/emotion.ts b/packages/system/src/emotion.ts
new file mode 100644
index 00000000..155e29ad
--- /dev/null
+++ b/packages/system/src/emotion.ts
@@ -0,0 +1,41 @@
+import createCacheImport from "@emotion/cache"
+import createEmotionImport from "@emotion/css/create-instance"
+
+export function createCache(...args: Parameters<typeof createCacheImport>) {
+  return typeof createCacheImport === "function"
+    ? createCacheImport(...args)
+    : // @ts-ignore
+    createCacheImport.default(...args) // @ts-ignore
+    ? createCacheImport.default(...args)
+    : // @ts-ignore
+      createCacheImport(...args)
+}
+
+export function createEmotion(...args: Parameters<typeof createEmotionImport>) {
+  return typeof createEmotionImport === "function"
+    ? createEmotionImport(...args)
+    : // @ts-ignore
+    createEmotionImport.default(...args) // @ts-ignore
+    ? createEmotionImport.default(...args)
+    : // @ts-ignore
+      createEmotionImport(...args)
+}
+
+export const chakraEmotionCache = createCache({
+  key: "chakra",
+})
+
+export const {
+  flush,
+  hydrate,
+  cx,
+  merge,
+  getRegisteredStyles,
+  injectGlobal,
+  keyframes,
+  css,
+  sheet,
+  cache,
+} = createEmotion({
+  key: chakraEmotionCache.key,
+})
diff --git a/packages/system/src/index.tsx b/packages/system/src/index.tsx
index 21bf24b2..e91576a9 100644
--- a/packages/system/src/index.tsx
+++ b/packages/system/src/index.tsx
@@ -25,8 +25,6 @@ export {
   DeepPartial,
   domElements,
   DOMElements,
-  injectGlobal,
-  keyframes,
   ToPropType,
 } from "./system.utils"
 export { useChakra, useTheme } from "./composables/use-chakra"
@@ -35,5 +33,20 @@ export {
   useStyleConfig,
 } from "./composables/use-style-config"
 
+export {
+  createCache,
+  chakraEmotionCache,
+  flush,
+  hydrate,
+  cx,
+  merge,
+  getRegisteredStyles,
+  injectGlobal,
+  keyframes,
+  css,
+  sheet,
+  cache,
+} from "./emotion"
+
 export type { BaseStyleResolverProps, StyleResolverProps } from "./chakra"
 export type { ChakraProps } from "./system.types"
diff --git a/packages/system/src/system.utils.ts b/packages/system/src/system.utils.ts
index 730bc96e..66a38093 100644
--- a/packages/system/src/system.utils.ts
+++ b/packages/system/src/system.utils.ts
@@ -1,5 +1,4 @@
 import { UnionStringArray } from "@chakra-ui/utils"
-import { keyframes, injectGlobal } from "@emotion/css"
 import { PropType } from "vue"
 
 /**
@@ -80,5 +79,3 @@ export type DeepPartial<T> = {
 export type ToPropType<T> = {
   [P in keyof T]?: PropType<T[P]>
 }
-
-export { keyframes, injectGlobal }
diff --git a/packages/system/tests/__snapshots__/system.test.ts.snap b/packages/system/tests/__snapshots__/system.test.ts.snap
index 472830ff..3a5f7f00 100644
--- a/packages/system/tests/__snapshots__/system.test.ts.snap
+++ b/packages/system/tests/__snapshots__/system.test.ts.snap
@@ -3,7 +3,7 @@
 exports[`as prop render Vue Component like :as="RouterLink" 1`] = `
 <DocumentFragment>
   <a
-    class="css-0"
+    class="chakra-0"
     href="https://vue.chakra-ui.com/"
   >
     as RouterLink
@@ -14,7 +14,7 @@ exports[`as prop render Vue Component like :as="RouterLink" 1`] = `
 exports[`as prop render dom elements like as="h1" 1`] = `
 <DocumentFragment>
   <h1
-    class="css-0"
+    class="chakra-0"
   >
     as h1
   </h1>
@@ -24,7 +24,7 @@ exports[`as prop render dom elements like as="h1" 1`] = `
 exports[`as prop resolve global vue components like as="router-link" 1`] = `
 <DocumentFragment>
   <a
-    class="css-0"
+    class="chakra-0"
     href="https://google.com"
   >
     as router-link
@@ -35,7 +35,7 @@ exports[`as prop resolve global vue components like as="router-link" 1`] = `
 exports[`chakra() works should be render properly 1`] = `
 <DocumentFragment>
   <span
-    class="css-0"
+    class="chakra-0"
   >
     child-element
   </span>
diff --git a/packages/vue/src/create-chakra.ts b/packages/vue/src/create-chakra.ts
new file mode 100644
index 00000000..60fe4681
--- /dev/null
+++ b/packages/vue/src/create-chakra.ts
@@ -0,0 +1,164 @@
+import { computed, ref, createVNode, render, UnwrapRef } from "vue"
+import { localStorageManager } from "@chakra-ui/c-color-mode"
+import mergeWith from "lodash.mergewith"
+import { theme as defaultTheme, baseTheme, Theme } from "@chakra-ui/theme"
+import { canUseDOM } from "@chakra-ui/utils"
+import { toCSSVar } from "@chakra-ui/styled-system"
+import { mode } from "@chakra-ui/theme-tools"
+import {
+  injectGlobal,
+  chakra,
+  createCache,
+  chakraEmotionCache,
+  domElements,
+} from "@chakra-ui/vue-system"
+
+import { setupColorModeContext } from "@chakra-ui/c-color-mode"
+import { injectResetStyles, injectThemeGlobalStyles } from "./helpers/css-reset"
+import { EmotionCacheInjectionSymbol } from "@chakra-ui/vue-styled"
+
+import {
+  ToastContainerId,
+  CToastContainer,
+  ToastContextSymbol,
+  toastContext,
+} from "@chakra-ui/c-toast"
+
+import internalIcons from "./icon.internals"
+import { MergedIcons, parseIcons } from "./parse-icons"
+
+// Type imports
+import type { Plugin } from "vue"
+import type { Dict } from "@chakra-ui/utils"
+import type { EmotionCache } from "@emotion/cache"
+import type { WithCSSVar } from "@chakra-ui/styled-system"
+import type { ThemeOverride } from "@chakra-ui/theme-utils"
+import type { ColorModeRef } from "@chakra-ui/c-color-mode"
+import type { ChakraPluginOptions } from "./helpers/plugin.types"
+
+const defaultPluginOptions: ChakraPluginOptions = {
+  cssReset: true,
+  isBaseTheme: false,
+  colorModeManager: localStorageManager,
+  experimental: {
+    disableFactoryComponents: false,
+  },
+}
+
+/**
+ * Helper function to extend Chakra plugin with options
+ * It just returns its arguments with typescript types added
+ */
+export function extendChakra(options = defaultPluginOptions) {
+  return options
+}
+
+export function createChakra(_options: ChakraPluginOptions) {
+  const ChakraUIVuePlugin: Plugin = {
+    install(app) {
+      const options = mergeWith(
+        {},
+        defaultPluginOptions,
+        _options
+      ) as ChakraPluginOptions
+      // 1. Get theme value
+      // 2. Parse theme tokens to CSS variables
+      // 3. Inject all CSS variables as theme object
+      const theme =
+        options.extendTheme! ||
+        ((options.isBaseTheme ? baseTheme : defaultTheme) as any as
+          | Theme
+          | (Omit<Theme, "components"> & { components: Dict }))
+      const computedTheme = computed<WithCSSVar<ThemeOverride>>(() =>
+        toCSSVar(theme)
+      )
+
+      const colorModeManager = options.colorModeManager || localStorageManager
+      // Inject Chakra CSS variables
+      injectGlobal({
+        ":root": computedTheme.value.__cssVars,
+      })
+
+      // Initialize color mode
+      const colorMode: UnwrapRef<ColorModeRef> =
+        theme.config?.initialColorMode || "light"
+
+      const colorModeRef = ref(colorMode) as ColorModeRef
+
+      setupColorModeContext(app, {
+        _colorMode: colorModeRef,
+        colorModeManager,
+        useSystemColorMode: theme.config?.useSystemColorMode || false,
+        initialColorMode: colorMode,
+        disableTransitionOnChange:
+          theme.config?.disableTransitionOnChange || false,
+      })
+
+      if (options.cssReset) {
+        injectResetStyles()
+      }
+
+      let libraryIcons = options.icons?.library || {}
+      let extendedIcons = options.icons?.extend || {}
+
+      // Bind theme to application global properties and provide to application
+      app.config.globalProperties.$chakraTheme = computedTheme.value
+      app.config.globalProperties.$chakraTheme = computedTheme.value
+      app.provide("$chakraTheme", computedTheme.value as ThemeOverride)
+
+      let emotionCache: EmotionCache
+      // Provide emotion cache
+      if (options.emotionCacheOptions) {
+        emotionCache = createCache(options.emotionCacheOptions)
+        app.provide(EmotionCacheInjectionSymbol, emotionCache)
+      }
+
+      emotionCache ||= chakraEmotionCache
+
+      // Inject `styles.global` in document
+      injectThemeGlobalStyles(computedTheme.value, emotionCache, colorModeRef)
+
+      libraryIcons = parseIcons(libraryIcons)
+
+      // Factory components
+      if (!options.experimental?.disableFactoryComponents) {
+        domElements.forEach((tag) => {
+          app.component(`chakra.${tag}`, chakra(tag))
+        })
+      }
+
+      // Merge internal icons and library icons
+      const mergedIcons: MergedIcons = {
+        ...internalIcons,
+        ...libraryIcons,
+        ...extendedIcons,
+      }
+
+      app.provide("$chakraIcons", mergedIcons)
+
+      // Set color mode property
+      app.config.globalProperties.$mode = mode
+
+      app.provide(ToastContextSymbol, toastContext)
+
+      // Setup toast container component
+      if (canUseDOM()) {
+        const toastContainer =
+          document.getElementById(ToastContainerId) ||
+          document.createElement("div")
+        toastContainer.id = ToastContainerId
+        toastContainer.setAttribute("data-chakra-toast-container", "")
+
+        if (!document.body.contains(toastContainer)) {
+          document.body.insertAdjacentElement("afterend", toastContainer)
+        }
+
+        const vnode = createVNode(CToastContainer)
+        vnode.appContext = app._context
+        render(vnode, toastContainer)
+      }
+    },
+  }
+
+  return ChakraUIVuePlugin
+}
diff --git a/packages/vue/src/helpers/css-reset.ts b/packages/vue/src/helpers/css-reset.ts
index 989780f8..2a56f1e0 100644
--- a/packages/vue/src/helpers/css-reset.ts
+++ b/packages/vue/src/helpers/css-reset.ts
@@ -1,4 +1,4 @@
-import { injectGlobal } from "@chakra-ui/vue-system"
+import { injectGlobal, createCache } from "@chakra-ui/vue-system"
 import { css } from "@chakra-ui/styled-system"
 import { cssResetStyles } from "@chakra-ui/c-reset"
 import { ThemeOverride } from "@chakra-ui/theme-utils"
@@ -9,7 +9,6 @@ import type { EmotionCache } from "@emotion/cache"
 import { serializeStyles } from "@emotion/serialize"
 import { StyleSheet } from "@emotion/sheet"
 import { insertStyles, SerializedStyles } from "@emotion/utils"
-import { createCache } from "@chakra-ui/vue-styled"
 
 /** Injects CSS reset styles */
 export function injectResetStyles() {
diff --git a/packages/vue/src/helpers/plugin.types.ts b/packages/vue/src/helpers/plugin.types.ts
index 804f4469..2878f0b5 100644
--- a/packages/vue/src/helpers/plugin.types.ts
+++ b/packages/vue/src/helpers/plugin.types.ts
@@ -13,6 +13,10 @@ interface IconsOptions {
   library?: {}
   extend?: Record<string, ExtendIconsPath>
 }
+
+export interface ExperimentalOptions {
+  disableFactoryComponents?: boolean
+}
 export interface ChakraPluginOptions {
   cssReset?: boolean
   extendTheme?: ThemeOverride
@@ -20,4 +24,5 @@ export interface ChakraPluginOptions {
   colorModeManager?: StorageManager
   emotionCacheOptions?: Options
   isBaseTheme?: boolean
+  experimental?: ExperimentalOptions
 }
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 3f333c3e..7e4907b6 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -1,34 +1,7 @@
-import { computed, createVNode, Plugin, ref, render, UnwrapRef } from "vue"
-import { theme as defaultTheme, baseTheme, Theme } from "@chakra-ui/theme"
-import { ColorModeRef, setupColorModeContext } from "@chakra-ui/c-color-mode"
-import { toCSSVar, WithCSSVar } from "@chakra-ui/styled-system"
-import { chakra, injectGlobal } from "@chakra-ui/vue-system"
-import {
-  EmotionThemeContextSymbol,
-  EmotionCacheInjectionSymbol,
-  createCache,
-} from "@chakra-ui/vue-styled"
-import type { EmotionCache } from "@emotion/cache"
-import internalIcons from "./icon.internals"
+import { chakra } from "@chakra-ui/vue-system"
 import type { ThemeOverride } from "@chakra-ui/theme-utils"
-import { MergedIcons, parseIcons } from "./parse-icons"
-import { injectResetStyles, injectThemeGlobalStyles } from "./helpers/css-reset"
-import { mode } from "@chakra-ui/theme-tools"
 import { ChakraPluginOptions } from "./helpers/plugin.types"
-import { canUseDOM, Dict } from "@chakra-ui/utils"
 import { localStorageManager } from "@chakra-ui/c-color-mode"
-import {
-  ToastContainerId,
-  CToastContainer,
-  ToastContextSymbol,
-  toastContext,
-} from "@chakra-ui/c-toast"
-
-/**
- * 1. Support passing cache options from plugin
- * 2. Provide emotion theme directly from plugin
- * 3.
- */
 
 const defaultPluginOptions: ChakraPluginOptions = {
   cssReset: true,
@@ -44,107 +17,10 @@ export function extendChakra(options = defaultPluginOptions) {
   return options
 }
 
-const ChakraUIVuePlugin: Plugin = {
-  install(app, options: ChakraPluginOptions = defaultPluginOptions) {
-    // 1. Get theme value
-    // 2. Parse theme tokens to CSS variables
-    // 3. Inject all CSS variables as theme object
-    const theme =
-      options.extendTheme! ||
-      ((options.isBaseTheme ? baseTheme : defaultTheme) as any as
-        | Theme
-        | (Omit<Theme, "components"> & { components: Dict }))
-    const computedTheme = computed<WithCSSVar<ThemeOverride>>(() =>
-      toCSSVar(theme)
-    )
-
-    const colorModeManager = options.colorModeManager || localStorageManager
-    // Inject Chakra CSS variables
-    injectGlobal({
-      ":root": computedTheme.value.__cssVars,
-    })
-
-    // Initialize color mode
-    const colorMode: UnwrapRef<ColorModeRef> =
-      theme.config?.initialColorMode || "light"
-
-    const colorModeRef = ref(colorMode) as ColorModeRef
-
-    setupColorModeContext(app, {
-      _colorMode: colorModeRef,
-      colorModeManager,
-      useSystemColorMode: theme.config?.useSystemColorMode || false,
-      initialColorMode: colorMode,
-      disableTransitionOnChange:
-        theme.config?.disableTransitionOnChange || false,
-    })
-
-    if (options.cssReset) {
-      injectResetStyles()
-    }
-
-    let libraryIcons = options.icons?.library || {}
-    let extendedIcons = options.icons?.extend || {}
-
-    // Bind theme to application global properties and provide to application
-    app.config.globalProperties.$chakraTheme = computedTheme.value
-    app.config.globalProperties.$chakraTheme = computedTheme.value
-    app.provide(EmotionThemeContextSymbol, computedTheme.value)
-    app.provide("$chakraTheme", computedTheme.value as ThemeOverride)
-
-    let emotionCache: EmotionCache
-    // Provide emotion cache
-    if (options.emotionCacheOptions) {
-      emotionCache = createCache(options.emotionCacheOptions)
-      app.provide(EmotionCacheInjectionSymbol, emotionCache)
-    }
-
-    emotionCache ||= createCache({
-      key: "chakra",
-      nonce: `chakra-global-cache-${Date.now()}`,
-    })
-
-    // Inject `styles.global` in document
-    injectThemeGlobalStyles(computedTheme.value, emotionCache, colorModeRef)
-
-    libraryIcons = parseIcons(libraryIcons)
-
-    // Merge internal icons and library icons
-    const mergedIcons: MergedIcons = {
-      ...internalIcons,
-      ...libraryIcons,
-      ...extendedIcons,
-    }
-
-    app.provide("$chakraIcons", mergedIcons)
-
-    // Set color mode property
-    app.config.globalProperties.$mode = mode
-
-    app.provide(ToastContextSymbol, toastContext)
-
-    // Setup toast container component
-    if (canUseDOM()) {
-      const toastContainer =
-        document.getElementById(ToastContainerId) ||
-        document.createElement("div")
-      toastContainer.id = ToastContainerId
-      toastContainer.setAttribute("data-chakra-toast-container", "")
-
-      if (!document.body.contains(toastContainer)) {
-        document.body.insertAdjacentElement("afterend", toastContainer)
-      }
-
-      const vnode = createVNode(CToastContainer)
-      vnode.appContext = app._context
-      render(vnode, toastContainer)
-    }
-  },
-}
+export { createChakra } from "./create-chakra"
 
 export type { ChakraPluginOptions }
 export interface ThemeProviderProps extends ThemeOverride {}
-export default ChakraUIVuePlugin
 export { extendTheme, extendBaseTheme } from "@chakra-ui/theme-utils"
 export * from "@chakra-ui/vue-system"
 
diff --git a/playground/src/chakra.ts b/playground/src/chakra.ts
new file mode 100644
index 00000000..7863961c
--- /dev/null
+++ b/playground/src/chakra.ts
@@ -0,0 +1,59 @@
+import { createChakra, extendTheme } from "../../packages/vue/src"
+import { feActivity, feUser } from "feather-icons-paths"
+import { mode } from "@chakra-ui/theme-tools"
+import { feGithub } from "feather-icons-paths"
+
+export const chakra = createChakra({
+  cssReset: true,
+  icons: {
+    library: {
+      feActivity,
+      feUser,
+      feGithub,
+    },
+    extend: {
+      discord: {
+        path: '<path fill="currentColor" d="M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z" fa-key="3" fill="currentColor"></path>',
+        viewBox: "0 0 496 512",
+      },
+    },
+  },
+  extendTheme: extendTheme({
+    config: {
+      // initialColorMode: "system",
+    },
+    fonts: {
+      heading: `SplineSans, sans-serif, Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
+      body: `SplineSans, sans-serif, Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
+    },
+    shadows: {
+      outline: `0 0 0 4px rgba(47, 133, 90, 0.62)`,
+      inset: `inset 0 2px 0 0 rgb(255 255 255 / 10%)`,
+      search:
+        "0 0 0 1px rgba(16,22,26,.1), 0 4px 8px rgba(16,22,26,.2), 0 18px 46px 6px rgba(16,22,26,.2)",
+    },
+    styles: {
+      global: (props: any) => {
+        return {
+          body: {
+            bg: mode("white", "gray.800")(props),
+            color: mode("blackAlpha.800", "whiteAlpha.800")(props),
+            "a.router-link-active": {
+              color: mode("teal.500", "teal.200")(props),
+              fontSize: mode("0.9rem", "0.9rem")(props),
+              fontWeight: mode("bold", "bold")(props),
+              textDecoration: mode("underline", "underline")(props),
+            },
+          },
+        }
+      },
+    },
+    components: {
+      Button: {
+        baseStyle: {
+          shadow: "inset",
+        },
+      },
+    },
+  }),
+})
diff --git a/playground/src/main.ts b/playground/src/main.ts
index 719b1ade..e7a90192 100644
--- a/playground/src/main.ts
+++ b/playground/src/main.ts
@@ -1,91 +1,19 @@
 import { createApp } from "vue"
-import Chakra, {
-  chakra,
-  extendTheme,
-  BodyScrollLockDirective,
-  extendChakra,
-  domElements,
-} from "../../packages/vue/src"
-import { feActivity, feUser } from "feather-icons-paths"
+import { BodyScrollLockDirective } from "../../packages/vue/src"
 import PerfectScrollbar from "vue3-perfect-scrollbar"
 import { MotionPlugin } from "@vueuse/motion"
 import App from "./App.vue"
 import router from "./router"
-import { mode } from "@chakra-ui/theme-tools"
-import { feGithub } from "feather-icons-paths"
+import { chakra } from "./chakra"
 
 console.log({ router })
 
 const app = createApp(App)
   .use(router)
   .use(MotionPlugin)
-  .use(
-    // @ts-ignore
-    Chakra,
-    extendChakra({
-      cssReset: true,
-      icons: {
-        library: {
-          feActivity,
-          feUser,
-          feGithub,
-        },
-        extend: {
-          discord: {
-            path: '<path fill="currentColor" d="M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z" fa-key="3" fill="currentColor"></path>',
-            viewBox: "0 0 496 512",
-          },
-        },
-      },
-      emotionCacheOptions: {
-        key: "chakra",
-      },
-      extendTheme: extendTheme({
-        config: {
-          // initialColorMode: "system",
-        },
-        fonts: {
-          heading: `SplineSans, sans-serif, Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
-          body: `SplineSans, sans-serif, Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
-        },
-        shadows: {
-          outline: `0 0 0 4px rgba(47, 133, 90, 0.62)`,
-          inset: `inset 0 2px 0 0 rgb(255 255 255 / 10%)`,
-          search:
-            "0 0 0 1px rgba(16,22,26,.1), 0 4px 8px rgba(16,22,26,.2), 0 18px 46px 6px rgba(16,22,26,.2)",
-        },
-        styles: {
-          global: (props: any) => {
-            return {
-              body: {
-                bg: mode("white", "gray.800")(props),
-                color: mode("blackAlpha.800", "whiteAlpha.800")(props),
-                "a.router-link-active": {
-                  color: mode("teal.500", "teal.200")(props),
-                  fontSize: mode("0.9rem", "0.9rem")(props),
-                  fontWeight: mode("bold", "bold")(props),
-                  textDecoration: mode("underline", "underline")(props),
-                },
-              },
-            }
-          },
-        },
-        components: {
-          Button: {
-            baseStyle: {
-              shadow: "inset",
-            },
-          },
-        },
-      }),
-    })
-  )
+  .use(chakra)
   .use(PerfectScrollbar)
 
-domElements.forEach((tag) => {
-  app.component(`chakra.${tag}`, chakra(tag))
-})
-
 app.directive("scroll-lock", BodyScrollLockDirective)
 
 app.mount("#app")
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1ffd2cd2..f642b403 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,7 +23,6 @@ importers:
       '@chakra-ui/utils': 2.0.15
       '@chakra-ui/vue-auto-import': workspace:*
       '@chakra-ui/vue-next': workspace:*
-      '@chakra-ui/vue-styled': workspace:*
       '@chakra-ui/vue-system': workspace:*
       '@chakra-ui/vue-test-utils': workspace:*
       '@changesets/changelog-github': ^0.3.0
@@ -180,7 +179,6 @@ importers:
       '@chakra-ui/utils': 2.0.15
       '@chakra-ui/vue-auto-import': link:tooling/auto-import
       '@chakra-ui/vue-next': link:packages/vue
-      '@chakra-ui/vue-styled': link:packages/styled
       '@chakra-ui/vue-system': link:packages/system
       '@chakra-ui/vue-test-utils': link:packages/test-utils
       '@changesets/changelog-github': 0.3.0
@@ -939,7 +937,6 @@ importers:
       '@chakra-ui/theme': ^2.2.5
       '@chakra-ui/utils': 2.0.15
       '@chakra-ui/vue-utils': workspace:*
-      '@emotion/css': ^11.10.5
       '@emotion/serialize': 1.1.1
       '@types/lodash.memoize': ^4.1.6
       lodash.camelcase: ^4.3.0
@@ -951,7 +948,6 @@ importers:
       '@chakra-ui/styled-system': 2.5.1
       '@chakra-ui/utils': 2.0.15
       '@chakra-ui/vue-utils': link:../utils
-      '@emotion/css': 11.10.5
       '@emotion/serialize': 1.1.1
       lodash.camelcase: 4.3.0
       lodash.kebabcase: 4.1.1