diff --git a/docs/app.vue b/docs/app.vue
index 40fc2303..93c70732 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -8,6 +8,10 @@
               @nuxthq/ui
             </NuxtLink>
           </div>
+
+          <UseDark v-slot="{ isDark, toggleDark }">
+            <UButton variant="transparent" :icon="isDark ? 'heroicons-outline:moon' : 'heroicons-outline:sun'" @click="toggleDark()" />
+          </UseDark>
         </div>
       </UContainer>
     </nav>
@@ -48,6 +52,8 @@
 </template>
 
 <script setup>
+import { UseDark } from '@vueuse/components'
+
 useMeta({
   title: '@nuxthq/ui',
   meta: [
diff --git a/package.json b/package.json
index 6c25b875..78235c13 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,8 @@
     "@iconify-json/heroicons-solid": "^1.0.2",
     "@popperjs/core": "^2.10.2",
     "@unocss/nuxt": "^0.12.4",
+    "@vueuse/components": "^7.0.3",
+    "@vueuse/core": "^7.0.3",
     "gradient-avatar": "^1.0.2",
     "pathe": "^0.2.0"
   },
diff --git a/src/index.ts b/src/index.ts
index 29a18d50..ee23f73a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,5 @@
 import { resolve, join } from 'pathe'
-import { defineNuxtModule, installModule } from '@nuxt/kit'
+import { defineNuxtModule, installModule, addPlugin, resolveModule } from '@nuxt/kit'
 import { colors } from '@unocss/preset-uno'
 import type { UnocssNuxtOptions } from '@unocss/nuxt'
 
@@ -95,8 +95,11 @@ export default defineNuxtModule({
 
     await installModule(nuxt, { src: '@unocss/nuxt', options })
 
+    const runtimeDir = resolve(__dirname, 'runtime')
     const componentsDir = resolve(__dirname, 'components')
 
+    addPlugin(resolveModule('./plugin', { paths: runtimeDir }), { append: true })
+
     nuxt.hook('components:dirs', (dirs) => {
       dirs.push({
         path: join(componentsDir, 'elements'),
diff --git a/src/runtime/plugin.ts b/src/runtime/plugin.ts
new file mode 100644
index 00000000..8ca02249
--- /dev/null
+++ b/src/runtime/plugin.ts
@@ -0,0 +1,6 @@
+import { useDark } from '@vueuse/core'
+import { defineNuxtPlugin } from '#app'
+
+export default defineNuxtPlugin(() => {
+  useDark()
+})
diff --git a/yarn.lock b/yarn.lock
index 185a540d..bb35e030 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1196,11 +1196,35 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.22.tgz#26dcbe5e530f6c1f2de5ca9aeab92ab00f523b41"
   integrity sha512-qWVav014mpjEtbWbEgl0q9pEyrrIySKum8UVYjwhC6njrKzknLZPvfuYdQyVbApsqr94tf/3dP4pCuZmmjdCWQ==
 
+"@vueuse/components@^7.0.3":
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/@vueuse/components/-/components-7.0.3.tgz#da8bf8877309cfe8758ba30d65a01c321b87fc9e"
+  integrity sha512-KpoPp/ngfKABckldymEY9Dm6S7vBtAiZoeeVnf5jVxU+0r/r8CO7gc1IjmJeamY0ZOKlUPM3JRqPXia0fDvILg==
+  dependencies:
+    "@vueuse/core" "7.0.3"
+    "@vueuse/shared" "7.0.3"
+    vue-demi "*"
+
+"@vueuse/core@7.0.3", "@vueuse/core@^7.0.3":
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-7.0.3.tgz#5c8290d4f4c232878f795067c094c3e7bda61332"
+  integrity sha512-iKm6H3oZHXvCLhvNTkIKekLTfwnFiUSmb1lNJbm2v6ZU26PrwXHZZ9kdeNolwtV1awPKHoi/5RS/FTIWt+nN5Q==
+  dependencies:
+    "@vueuse/shared" "7.0.3"
+    vue-demi "*"
+
 "@vueuse/head@^0.7.2":
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/@vueuse/head/-/head-0.7.2.tgz#594e857bd7161c6087e5d0934a7ee0f7c4276154"
   integrity sha512-97RxYbIYwB9yFuRbdDbktsjKS0k12wYNksYV/UtYLOFNx+GAflK2kQ63b+sx09MJllEozD3GLeXV7O8rzMskeQ==
 
+"@vueuse/shared@7.0.3":
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-7.0.3.tgz#865be595c28149f20029750f0706462750bc39f9"
+  integrity sha512-g3FX5PMK3MrWPFrU6EL9wDYyGlgjOiOroe1idKHezcvtZQ1pkjbpQyLBmjWQvVTEF67k0aGlRd+YTpg8GcfcJw==
+  dependencies:
+    vue-demi "*"
+
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
@@ -6288,6 +6312,11 @@ vue-bundle-renderer@^0.3.3:
   dependencies:
     bundle-runner "^0.0.1"
 
+vue-demi@*:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.1.tgz#f7e18efbecffd11ab069d1472d7a06e319b4174c"
+  integrity sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==
+
 vue-eslint-parser@^7.10.0:
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz#214b5dea961007fcffb2ee65b8912307628d0daf"