diff --git a/packages/windi/package.json b/packages/windi/package.json
index 9bd6694..59b9a63 100644
--- a/packages/windi/package.json
+++ b/packages/windi/package.json
@@ -47,6 +47,7 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
+    "@headlessui/vue": "^1.7.15",
     "@heroicons/vue": "^2.0.18",
     "@selemondev/windi-ui": "workspace:^",
     "classnames": "^2.3.2",
diff --git a/packages/windi/src/App.vue b/packages/windi/src/App.vue
index 763986a..0de6093 100644
--- a/packages/windi/src/App.vue
+++ b/packages/windi/src/App.vue
@@ -1,8 +1,11 @@
 <script setup lang='ts'>
+import { ref } from 'vue'
+
+const selected = ref('')
 </script>
 
 <template>
   <div class="grid place-items-center w-full min-h-screen">
-    <WButton variant="default-light" disabled label="Button" />
+    <WSwitch v-model="selected" on-icon="ph:sun" off-icon="ph:moon" class="text-xl" />
   </div>
 </template>
diff --git a/packages/windi/src/Types/componentsTypes/components.ts b/packages/windi/src/Types/componentsTypes/components.ts
index b84f6ba..188f8e7 100644
--- a/packages/windi/src/Types/componentsTypes/components.ts
+++ b/packages/windi/src/Types/componentsTypes/components.ts
@@ -124,6 +124,20 @@ export interface WCheckbox extends WComponentRoot {
 export interface WDivider extends WComponentRoot {
   dividerVertical?: string
 }
+
+export interface WSwitch extends WComponentRoot {
+  switchRounded?: string
+  switchActive?: string
+  switchInActive?: string
+  switchContainer?: string
+  switchContainerActive?: string
+  switchContainerInActive?: string
+  switchIcon?: string
+  switchIconActive?: string
+  switchIconInActive?: string
+  switchIconOn?: string
+  switchIconOff?: string
+}
 export type WAccordionVariant = WithVariantProps<WAccordion>
 
 export type WAccordionItemVariants = WithVariantProps<WAccordionItem>
@@ -151,3 +165,5 @@ export type WInputVariants = WithVariantProps<WInput>
 export type WCheckboxVariants = WithVariantProps<WCheckbox>
 
 export type WDividerVariants = WithVariantProps<WDivider>
+
+export type WSwitchVariants = WithVariantProps<WSwitch>
diff --git a/packages/windi/src/Types/enums/Components.ts b/packages/windi/src/Types/enums/Components.ts
index f6c1f32..1df6c7e 100644
--- a/packages/windi/src/Types/enums/Components.ts
+++ b/packages/windi/src/Types/enums/Components.ts
@@ -13,4 +13,5 @@ export enum Components {
   WCheckbox = 'WCheckbox',
   WKbd = 'WKbd',
   WDivider = 'WDivider',
+  WSwitch = 'WSwitch',
 }
diff --git a/packages/windi/src/components/Switch/WSwitch.vue b/packages/windi/src/components/Switch/WSwitch.vue
new file mode 100644
index 0000000..434b5cf
--- /dev/null
+++ b/packages/windi/src/components/Switch/WSwitch.vue
@@ -0,0 +1,93 @@
+<script setup lang='ts'>
+import { computed, defineComponent } from 'vue'
+import classNames from 'classnames'
+import { Switch } from '@headlessui/vue'
+import { Icon } from '@iconify/vue'
+import { getVariantPropsWithClassesList } from '../../utils/getVariantProps'
+import type { VariantJSWithClassesListProps } from '../../utils/getVariantProps'
+import type { WSwitch } from '../../Types/componentsTypes/components'
+import { useVariants } from '../../composables/useVariants'
+import { Components } from '../../Types/enums/Components'
+
+const props = defineProps({
+  ...getVariantPropsWithClassesList<WSwitch>(),
+  name: {
+    type: String,
+    default: null,
+  },
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  onIcon: {
+    type: String,
+    default: null,
+  },
+
+  offIcon: {
+    type: String,
+    default: null,
+  },
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const toggle = computed({
+  get() {
+    return props.modelValue
+  },
+
+  set(value) {
+    return emit('update:modelValue', value)
+  },
+})
+
+const variant = computed(() => {
+  const customProps = {
+    ...props,
+    variant: props.variant,
+  }
+  return useVariants<WSwitch>(
+    Components.WSwitch,
+    customProps as VariantJSWithClassesListProps<WSwitch>,
+  )
+})
+
+const switchClassWrapper = computed(() => {
+  return classNames(
+    variant.value.root,
+    variant.value.switchRounded,
+    toggle.value ? variant.value.switchActive : variant.value.switchInActive,
+  )
+})
+</script>
+
+<script lang='ts'>
+export default defineComponent({
+  name: Components.WSwitch,
+})
+</script>
+
+<template>
+  <Switch
+    v-model="toggle"
+    :name="name"
+    :disabled="disabled"
+    :class="switchClassWrapper"
+  >
+    <span :class="[toggle ? variant.switchContainerActive : variant.switchContainerInActive, variant.switchContainer]">
+      <span v-if="props.onIcon" :class="[toggle ? variant.switchIconActive : variant.switchIconInActive, variant.switchIcon]" aria-hidden="true">
+        <Icon :icon="onIcon" :class="variant.switchIconOn" />
+      </span>
+      <span v-if="props.offIcon" :class="[toggle ? variant.switchIconInActive : variant.switchIconActive, variant.switchIcon]" aria-hidden="true">
+        <Icon :icon="offIcon" :class="variant.switchIconOff" />
+      </span>
+    </span>
+  </Switch>
+</template>
diff --git a/packages/windi/src/components/Switch/index.ts b/packages/windi/src/components/Switch/index.ts
new file mode 100644
index 0000000..a639981
--- /dev/null
+++ b/packages/windi/src/components/Switch/index.ts
@@ -0,0 +1,5 @@
+import Switch from './WSwitch.vue'
+
+export default {
+  Switch,
+}
diff --git a/packages/windi/src/index.ts b/packages/windi/src/index.ts
index 53461da..deb25e6 100644
--- a/packages/windi/src/index.ts
+++ b/packages/windi/src/index.ts
@@ -15,6 +15,7 @@ import Kbd from './components/Kbd/WKbd.vue'
 import Input from './components/Input/WInput.vue'
 import Checkbox from './components/Checkbox/WCheckbox.vue'
 import Divider from './components/Divider/WDivider.vue'
+import Switch from './components/Switch/WSwitch.vue'
 import windiTheme from './theme/windiTheme'
 
 const components: Record<string, ReturnType<typeof defineComponent>> = {
@@ -32,6 +33,7 @@ const components: Record<string, ReturnType<typeof defineComponent>> = {
   Input,
   Checkbox,
   Divider,
+  Switch,
 }
 
 function install(app: App, configuration: WindiUIConfiguration) {
@@ -56,3 +58,4 @@ export { default as Kbd } from './components/Kbd'
 export { default as Input } from './components/Input'
 export { default as Checkbox } from './components/Checkbox'
 export { default as Divider } from './components/Divider'
+export { default as Switch } from './components/Switch'
diff --git a/packages/windi/src/theme/windiTheme.ts b/packages/windi/src/theme/windiTheme.ts
index c969fd5..ae59694 100644
--- a/packages/windi/src/theme/windiTheme.ts
+++ b/packages/windi/src/theme/windiTheme.ts
@@ -660,6 +660,31 @@ export default {
       },
     },
   },
+
+  WSwitch: {
+    base: {
+      root: 'relative inline-flex h-5 w-9 focus-visible:ring-2 focus-visible:ring-green-500 dark:focus-visible:ring-green-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 flex-shrink-0 border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none',
+      switchRounded: 'rounded-full',
+      switchActive: 'bg-green-500 dark:bg-green-400',
+      switchInActive: 'bg-gray-200 dark:bg-gray-700',
+      switchContainer: 'pointer-events-none relative inline-block h-4 w-4 rounded-full bg-white dark:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200',
+      switchContainerActive: 'translate-x-4 rtl:-translate-x-4',
+      switchContainerInActive: 'translate-x-0 rtl:-translate-x-0',
+      switchIcon: 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity',
+      switchIconActive: 'opacity-100 ease-in duration-200',
+      switchIconInActive: 'opacity-0 ease-out duration-100',
+      switchIconOn: 'h-3 w-3 text-green-500 dark:text-green-400',
+      switchIconOff: 'h-3 w-3 text-gray-400 dark:text-gray-500',
+    },
+
+    defaults: {
+      root: 'relative inline-flex h-5 w-9 focus-visible:ring-2 focus-visible:ring-green-500 dark:focus-visible:ring-green-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 flex-shrink-0 border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none',
+      switchRounded: 'rounded-full',
+      switchActive: 'bg-green-500 dark:bg-green-400',
+      switchInActive: 'bg-gray-200 dark:bg-gray-700',
+    },
+  },
+
   transitions: {
     scale: {
       'enter-active-class': 'duration-200 ease-[cubic-bezier(0.175,0.885,0.32,1.475)]',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c08aaae..fc34722 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -159,6 +159,9 @@ importers:
 
   packages/windi:
     dependencies:
+      '@headlessui/vue':
+        specifier: ^1.7.15
+        version: 1.7.15(vue@3.3.4)
       '@heroicons/vue':
         specifier: ^2.0.18
         version: 2.0.18(vue@3.3.4)
@@ -1179,6 +1182,15 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
+  /@headlessui/vue@1.7.15(vue@3.3.4):
+    resolution: {integrity: sha512-3ozVEgQ8mw09nWvUPN+8S6C8l3SM0lVT1aEN/+oP5Y4LF0WNMM9UrVisVTN9LLQ06v/X3EFA0blyL/vg8XNZlg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      vue: 3.3.4
+    dev: false
+
   /@heroicons/vue@2.0.18(vue@3.3.4):
     resolution: {integrity: sha512-BcTC9nq2TkwNSfQuqo96J7ehx4etezypc2YeTq7KsXWxrcrerhkgjLrxGRBnStN0wrXo0Gv4BInybqz5uBG6Cw==}
     peerDependencies: