diff --git a/.vitepress/theme/components/Switch.vue b/.vitepress/theme/components/Switch.vue
new file mode 100644
index 000000000..45dfac1ae
--- /dev/null
+++ b/.vitepress/theme/components/Switch.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { ref } from "vue";
+import { Switch } from "@headlessui/vue";
+
+const enabled = ref(false);
+</script>
+
+<template>
+  <Switch v-model="enabled" class="switch" :class="{ enabled }">
+    <span class="thumb" />
+  </Switch>
+</template>
+
+<style>
+.switch {
+  display: inline-flex;
+  position: relative;
+  width: 40px;
+  height: 22px;
+  flex-shrink: 0;
+  border: 1px solid var(--vp-input-border-color);
+  background-color: var(--vp-input-switch-bg-color);
+  transition:
+    border-color 0.25s,
+    background-color 0.4s ease;
+  border-radius: 11px;
+}
+
+.switch.enabled {
+  background-color: var(--vp-c-brand);
+}
+</style>
+
+<style scoped>
+.switch:hover {
+  border-color: var(--vp-input-hover-border-color);
+}
+
+.thumb {
+  display: inline-block;
+  background-color: #fff;
+  transition: transform 0.25s;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  box-shadow: var(--vp-shadow-1);
+}
+
+.switch.enabled .thumb {
+  transform: translateX(18px);
+}
+</style>
diff --git a/.vitepress/theme/components/ToggleStarred.vue b/.vitepress/theme/components/ToggleStarred.vue
index 777511a22..a734da95e 100644
--- a/.vitepress/theme/components/ToggleStarred.vue
+++ b/.vitepress/theme/components/ToggleStarred.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import Switch from "./Switch.vue";
+
 const toggleStarred = () => document.documentElement.classList.toggle("starred-only");
 </script>
 
 <template>
-  <button class="p-[4px 8px] text-xl i-carbon:star" @click="toggleStarred()" />
+  <Switch @click="toggleStarred()" />
 </template>
 
 <style>
diff --git a/package.json b/package.json
index 4eda57f47..0d049da41 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "postinstall": "nitropack prepare"
   },
   "dependencies": {
+    "@headlessui/vue": "^1.7.16",
     "@resvg/resvg-js": "^2.6.0",
     "fast-glob": "^3.3.1",
     "itty-fetcher": "^0.9.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d5be0bea3..97049b03e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,6 +10,9 @@ patchedDependencies:
     path: patches/vitepress@1.0.0-rc.25.patch
 
 dependencies:
+  '@headlessui/vue':
+    specifier: ^1.7.16
+    version: 1.7.16(vue@3.3.7)
   '@resvg/resvg-js':
     specifier: ^2.6.0
     version: 2.6.0
@@ -1808,6 +1811,15 @@ packages:
     engines: {node: '>=14'}
     dev: false
 
+  /@headlessui/vue@1.7.16(vue@3.3.7):
+    resolution: {integrity: sha512-nKT+nf/q6x198SsyK54mSszaQl/z+QxtASmgMEJtpxSX2Q0OPJX0upS/9daDyiECpeAsvjkoOrm2O/6PyBQ+Qg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      vue: 3.3.7
+    dev: false
+
   /@iconify-json/carbon@1.1.21:
     resolution: {integrity: sha512-bK2cMVM4noBU+FGlay433flpXLRzQu0ED095iAnoO6ka3yb4uz0lvb8acpN5gthyGLJ89C4HpfIbQZLQnMKQww==}
     dependencies: