diff --git a/components/content/inspira/examples/compare/CompareAutoplayDemo.vue b/components/content/inspira/examples/compare/CompareAutoplayDemo.vue
new file mode 100644
index 0000000..5776635
--- /dev/null
+++ b/components/content/inspira/examples/compare/CompareAutoplayDemo.vue
@@ -0,0 +1,22 @@
+<template>
+  <div
+    class="flex h-[60vh] w-full items-center justify-center px-1 [perspective:800px] [transform-style:preserve-3d] md:px-8"
+  >
+    <div
+      :style="{
+        transform: 'rotateX(15deg) translateZ(80px)',
+      }"
+      class="mx-auto h-1/2 w-3/4 rounded-3xl border border-neutral-200 bg-neutral-100 p-1 md:h-3/4 md:p-4 dark:border-neutral-800 dark:bg-neutral-900"
+    >
+      <Compare
+        first-image="/images/inspira-light.png"
+        second-image="/images/inspira-dark.png"
+        first-content-class="object-cover object-left-center w-full h-96"
+        second-content-class="object-cover object-left-center w-full h-96"
+        class="size-full rounded-[22px] md:rounded-xl"
+        slide-mode="hover"
+        :autoplay="true"
+      />
+    </div>
+  </div>
+</template>
diff --git a/components/content/inspira/examples/compare/CompareCustomContentDemo.vue b/components/content/inspira/examples/compare/CompareCustomContentDemo.vue
new file mode 100644
index 0000000..309e7ee
--- /dev/null
+++ b/components/content/inspira/examples/compare/CompareCustomContentDemo.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="flex w-full justify-center">
+    <Compare
+      class="rounded-xl shadow-lg"
+      :autoplay="true"
+      :autoplay-duration="3000"
+      slide-mode="hover"
+    >
+      <template #first-content>
+        <div class="flex size-full items-center justify-center bg-blue-500">
+          <div class="text-4xl font-bold text-white">☀️ Day</div>
+        </div>
+      </template>
+      <template #second-content>
+        <div class="flex size-full items-center justify-center bg-gray-900">
+          <div class="text-4xl font-bold text-white">🌙 Night</div>
+        </div>
+      </template>
+    </Compare>
+  </div>
+</template>
diff --git a/components/content/inspira/examples/compare/CompareDemo.vue b/components/content/inspira/examples/compare/CompareDemo.vue
new file mode 100644
index 0000000..eb23934
--- /dev/null
+++ b/components/content/inspira/examples/compare/CompareDemo.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="flex w-full justify-center">
+    <div
+      class="rounded-3xl border border-neutral-200 bg-neutral-100 p-4 dark:border-neutral-800 dark:bg-neutral-900"
+    >
+      <Compare
+        first-image="https://images.vscodethemes.com/antfu.theme-vitesse/vitesse-light-soft-js-preview-4JM.svg"
+        second-image="https://images.vscodethemes.com/antfu.theme-vitesse/vitesse-dark-soft-js-preview-4JM.svg"
+        first-content-class="object-cover object-left-top rounded-xl overflow-hidden"
+        second-content-class="object-cover object-left-top rounded-xl overflow-hidden"
+        class="h-[250px] w-[200px] md:h-96 md:w-[500px]"
+        slide-mode="hover"
+      >
+      </Compare>
+    </div>
+  </div>
+</template>
diff --git a/components/content/inspira/examples/compare/CompareDragDemo.vue b/components/content/inspira/examples/compare/CompareDragDemo.vue
new file mode 100644
index 0000000..6271c81
--- /dev/null
+++ b/components/content/inspira/examples/compare/CompareDragDemo.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="flex w-full justify-center">
+    <Compare
+      slide-mode="drag"
+      class="rounded-xl !bg-zinc-950"
+    >
+      <template #first-content>
+        <div class="size-full overflow-auto bg-zinc-900 p-8">
+          <pre
+            class="font-mono text-red-400"
+            v-text="firstCode"
+          ></pre>
+        </div>
+      </template>
+      <template #second-content>
+        <div class="size-full overflow-auto bg-zinc-900 p-8">
+          <pre
+            class="font-mono text-green-400"
+            v-text="secondCode"
+          ></pre>
+        </div>
+      </template>
+    </Compare>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { firstCode, secondCode } from "./code/index";
+</script>
diff --git a/components/content/inspira/examples/compare/code/index.ts b/components/content/inspira/examples/compare/code/index.ts
new file mode 100644
index 0000000..504cc20
--- /dev/null
+++ b/components/content/inspira/examples/compare/code/index.ts
@@ -0,0 +1,36 @@
+export const firstCode = `
+// Usage before 3.5
+<script setup>
+import { ref, onMounted } from 'vue'
+
+// declare a ref to hold the element reference
+// the name must match template ref value
+const input = ref(null)
+
+onMounted(() => {
+  input.value.focus()
+})
+</script>
+
+<template>
+  <input ref="input" />
+</template>
+`;
+
+export const secondCode = `
+// Usage after 3.5
+<script setup>
+import { useTemplateRef, onMounted } from 'vue'
+
+// the first argument must match the ref value in the template
+const input = useTemplateRef('my-input')
+
+onMounted(() => {
+  input.value.focus()
+})
+</script>
+
+<template>
+  <input ref="my-input" />
+</template>
+`;
diff --git a/components/content/inspira/ui/compare/Compare.vue b/components/content/inspira/ui/compare/Compare.vue
new file mode 100644
index 0000000..abcaaee
--- /dev/null
+++ b/components/content/inspira/ui/compare/Compare.vue
@@ -0,0 +1,315 @@
+<template>
+  <div
+    ref="sliderRef"
+    :class="cn('w-[400px] h-[400px] overflow-hidden', props.class)"
+    :style="{
+      position: 'relative',
+      cursor: props.slideMode === 'drag' ? 'grab' : 'col-resize',
+    }"
+    @mousemove="handleMouseMove"
+    @mouseleave="mouseLeaveHandler"
+    @mouseenter="mouseEnterHandler"
+    @mousedown="handleMouseDown"
+    @mouseup="handleEnd"
+    @touchstart="handleTouchStart"
+    @touchend="handleTouchEnd"
+    @touchmove="handleTouchMove"
+  >
+    <!-- Slider Line -->
+    <Transition>
+      <div
+        v-show="true"
+        class="absolute top-0 z-30 m-auto h-full w-px bg-gradient-to-b from-transparent from-5% via-indigo-500 to-transparent to-95%"
+        :style="{
+          left: `${sliderXPercent}%`,
+          top: '0',
+          zIndex: 40,
+          pointerEvents: 'none',
+        }"
+      >
+        <!-- Decorative Effects -->
+        <div
+          class="absolute left-0 top-1/2 z-20 h-full w-36 -translate-y-1/2 bg-gradient-to-r from-indigo-400 via-transparent to-transparent opacity-50 [mask-image:radial-gradient(100px_at_left,white,transparent)]"
+        />
+        <div
+          class="absolute left-0 top-1/2 z-10 h-1/2 w-10 -translate-y-1/2 bg-gradient-to-r from-cyan-400 via-transparent to-transparent opacity-100 [mask-image:radial-gradient(50px_at_left,white,transparent)]"
+        />
+        <div
+          class="absolute -right-10 top-1/2 h-3/4 w-10 -translate-y-1/2 [mask-image:radial-gradient(100px_at_left,white,transparent)]"
+        >
+          <StarField
+            :stars-count="120"
+            class="size-full"
+          />
+        </div>
+
+        <!-- Custom Handle Slot -->
+        <slot name="handle">
+          <div
+            v-if="props.showHandlebar"
+            class="pointer-events-auto absolute -right-2.5 top-1/2 z-30 flex size-5 -translate-y-1/2 cursor-grab items-center justify-center rounded-md bg-white shadow-[0px_-1px_0px_0px_#FFFFFF40]"
+          >
+            <Icon
+              name="heroicons:ellipsis-vertical"
+              class="size-4 text-black"
+            />
+          </div>
+        </slot>
+      </div>
+    </Transition>
+
+    <!-- First Content -->
+    <div
+      class="relative z-20 size-full overflow-hidden"
+      :style="{ pointerEvents: isInteracting ? 'none' : 'auto' }"
+    >
+      <Transition>
+        <div
+          v-show="true"
+          :class="
+            cn(
+              'absolute inset-0 z-20 rounded-2xl flex-shrink-0 w-full h-full select-none overflow-hidden',
+              props.firstContentClass,
+            )
+          "
+          :style="{
+            clipPath: `inset(0 ${100 - sliderXPercent}% 0 0)`,
+          }"
+        >
+          <slot name="first-content">
+            <img
+              v-if="props.firstImage"
+              :alt="props.firstImageAlt"
+              :src="props.firstImage"
+              :class="
+                cn(
+                  'absolute inset-0 z-20 rounded-2xl flex-shrink-0 w-full h-full select-none',
+                  firstContentClass,
+                )
+              "
+              :draggable="false"
+            />
+          </slot>
+        </div>
+      </Transition>
+    </div>
+
+    <!-- Second Content -->
+    <Transition>
+      <div
+        v-show="true"
+        :class="
+          cn(
+            'absolute top-0 left-0 z-[19] rounded-2xl w-full h-full select-none',
+            props.secondContentClass,
+          )
+        "
+        :style="{ pointerEvents: isInteracting ? 'none' : 'auto' }"
+      >
+        <slot name="second-content">
+          <img
+            v-if="props.secondImage"
+            :alt="props.secondImageAlt"
+            :src="props.secondImage"
+            :class="cn('w-full h-full object-cover', secondContentClass)"
+            :draggable="false"
+          />
+        </slot>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from "~/lib/utils";
+
+interface Props {
+  firstImage?: string;
+  secondImage?: string;
+  firstImageAlt?: string;
+  secondImageAlt?: string;
+  class?: string;
+  firstContentClass?: string;
+  secondContentClass?: string;
+  initialSliderPercentage?: number;
+  slideMode?: "hover" | "drag";
+  showHandlebar?: boolean;
+  autoplay?: boolean;
+  autoplayDuration?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  firstImage: "",
+  secondImage: "",
+  firstImageAlt: "First image",
+  secondImageAlt: "Second image",
+  class: "",
+  firstContentClass: "",
+  secondContentClass: "",
+  initialSliderPercentage: 50,
+  slideMode: "hover",
+  showHandlebar: true,
+  autoplay: false,
+  autoplayDuration: 5000,
+});
+
+const emit = defineEmits<{
+  (e: "update:percentage", value: number): void;
+  (e: "drag:start"): void;
+  (e: "drag:end"): void;
+  (e: "hover:enter"): void;
+  (e: "hover:leave"): void;
+}>();
+
+const sliderRef = templateRef<HTMLDivElement | null>("sliderRef");
+const sliderXPercent = ref(props.initialSliderPercentage);
+const isDragging = ref(false);
+const isMouseOver = ref(false);
+const isInteracting = ref(false);
+let autoplayTimeout: ReturnType<typeof setTimeout> | null = null;
+let autoplayRAF: number | null = null;
+
+function startAutoplay(): void {
+  if (!props.autoplay || isMouseOver.value || isDragging.value) return;
+
+  const startTime = Date.now();
+  function animate(): void {
+    if (isMouseOver.value || isDragging.value) {
+      if (autoplayRAF) cancelAnimationFrame(autoplayRAF);
+      return;
+    }
+
+    const elapsedTime = Date.now() - startTime;
+    const progress = (elapsedTime % (props.autoplayDuration * 2)) / props.autoplayDuration;
+    const percentage = progress <= 1 ? progress * 100 : (2 - progress) * 100;
+
+    sliderXPercent.value = percentage;
+    emit("update:percentage", percentage);
+    autoplayRAF = requestAnimationFrame(animate);
+  }
+
+  animate();
+}
+
+function stopAutoplay(): void {
+  if (autoplayTimeout) {
+    clearTimeout(autoplayTimeout);
+    autoplayTimeout = null;
+  }
+  if (autoplayRAF) {
+    cancelAnimationFrame(autoplayRAF);
+    autoplayRAF = null;
+  }
+}
+
+function mouseEnterHandler(): void {
+  isMouseOver.value = true;
+  emit("hover:enter");
+  if (props.autoplay) {
+    stopAutoplay();
+  }
+}
+
+function mouseLeaveHandler(): void {
+  isMouseOver.value = false;
+  isInteracting.value = false;
+  emit("hover:leave");
+
+  if (props.slideMode === "hover") {
+    sliderXPercent.value = props.initialSliderPercentage;
+    emit("update:percentage", props.initialSliderPercentage);
+  }
+  if (props.slideMode === "drag") {
+    isDragging.value = false;
+  }
+
+  if (props.autoplay) {
+    startAutoplay();
+  }
+}
+
+function handleStart(): void {
+  if (props.slideMode === "drag") {
+    isDragging.value = true;
+    isInteracting.value = true;
+    emit("drag:start");
+    stopAutoplay();
+  }
+}
+
+function handleEnd(): void {
+  if (props.slideMode === "drag") {
+    isDragging.value = false;
+    isInteracting.value = false;
+    emit("drag:end");
+    if (props.autoplay && !isMouseOver.value) {
+      startAutoplay();
+    }
+  }
+}
+
+function handleMove(clientX: number): void {
+  if (!sliderRef.value) return;
+
+  if (props.slideMode === "hover" || (props.slideMode === "drag" && isDragging.value)) {
+    isInteracting.value = true;
+    stopAutoplay();
+
+    const rect = sliderRef.value.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const percent = (x / rect.width) * 100;
+
+    requestAnimationFrame(() => {
+      const newPercent = Math.max(0, Math.min(100, percent));
+      sliderXPercent.value = newPercent;
+      emit("update:percentage", newPercent);
+    });
+  }
+}
+
+function handleMouseDown(e: MouseEvent): void {
+  handleStart();
+}
+
+function handleMouseMove(e: MouseEvent): void {
+  handleMove(e.clientX);
+}
+
+function handleTouchStart(e: TouchEvent): void {
+  if (!props.autoplay) handleStart();
+}
+
+function handleTouchEnd(): void {
+  if (!props.autoplay) handleEnd();
+}
+
+function handleTouchMove(e: TouchEvent): void {
+  if (!props.autoplay) handleMove(e.touches[0].clientX);
+}
+
+onMounted(() => {
+  startAutoplay();
+});
+
+onUnmounted(() => {
+  stopAutoplay();
+});
+
+watch(
+  () => props.initialSliderPercentage,
+  (newValue) => {
+    sliderXPercent.value = newValue;
+  },
+);
+
+watch(
+  () => props.autoplay,
+  (newValue) => {
+    if (newValue && !isMouseOver.value && !isDragging.value) {
+      startAutoplay();
+    } else {
+      stopAutoplay();
+    }
+  },
+);
+</script>
diff --git a/components/content/inspira/ui/compare/StarField.vue b/components/content/inspira/ui/compare/StarField.vue
new file mode 100644
index 0000000..91ae87e
--- /dev/null
+++ b/components/content/inspira/ui/compare/StarField.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="absolute inset-0 overflow-hidden">
+    <div
+      v-for="star in stars"
+      :key="star.id"
+      :style="{
+        top: star.top,
+        left: star.left,
+        width: `${star.size}px`,
+        height: `${star.size}px`,
+        '--inspira-twinkle-duration': `${star.twinkleDuration}s`,
+        '--inspira-drift-duration': `${star.driftDuration}s`,
+        '--inspira-drift-direction': `${star.driftDirection}px`,
+        '--inspira-opacity-start': star.opacityStart,
+        '--inspira-opacity-end': star.opacityEnd,
+      }"
+      class="star absolute rounded-full bg-white"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  starsCount?: number;
+}
+
+interface Star {
+  id: number;
+  top: string;
+  left: string;
+  size: number;
+  twinkleDuration: number;
+  driftDuration: number;
+  driftDirection: number;
+  opacityStart: number;
+  opacityEnd: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  starsCount: 130,
+});
+
+function random(min: number, max: number): number {
+  return Math.random() * (max - min) + min;
+}
+
+function randomSize(): number {
+  // Randomly return either 1 or 2
+  return Math.random() < 0.5 ? 1 : 2;
+}
+
+const stars = computed(() =>
+  Array.from(
+    { length: props.starsCount },
+    (_, i): Star => ({
+      id: i,
+      top: `${random(0, 100)}%`,
+      left: `${random(0, 100)}%`,
+      size: randomSize(),
+      twinkleDuration: random(2, 4),
+      driftDuration: random(5, 10),
+      driftDirection: random(-50, 50),
+      opacityStart: random(0.1, 0.3),
+      opacityEnd: random(0.7, 1),
+    }),
+  ),
+);
+</script>
+
+<style scoped>
+.star {
+  opacity: var(--inspira-opacity-start);
+  animation:
+    twinkle var(--inspira-twinkle-duration) ease-in-out infinite alternate,
+    drift var(--inspira-drift-duration) linear infinite;
+}
+
+@keyframes twinkle {
+  0% {
+    opacity: var(--inspira-opacity-start);
+  }
+  100% {
+    opacity: var(--inspira-opacity-end);
+  }
+}
+
+@keyframes drift {
+  0% {
+    transform: translate(0, 0);
+  }
+  25% {
+    transform: translate(var(--inspira-drift-direction), calc(var(--inspira-drift-direction) / 2));
+  }
+  50% {
+    transform: translate(calc(var(--inspira-drift-direction) / 2), var(--inspira-drift-direction));
+  }
+  75% {
+    transform: translate(
+      calc(var(--inspira-drift-direction) * -1),
+      calc(var(--inspira-drift-direction) / 2)
+    );
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+</style>
diff --git a/content/2.components/compare.md b/content/2.components/compare.md
new file mode 100644
index 0000000..15994e5
--- /dev/null
+++ b/content/2.components/compare.md
@@ -0,0 +1,78 @@
+---
+title: Compare
+description: Slide to compare any two pieces of content - images, designs, code, or custom elements
+navBadges:
+  - value: New
+    type: lime
+---
+
+::ComponentLoader{label="Preview" componentName="CompareDemo" type="examples" id="compare"}
+::
+
+## Examples
+
+Drag handle with custom content
+
+::ComponentLoader{label="Preview" componentName="CompareDragDemo" type="examples" id="compare"}
+::
+
+AutoPlay
+
+::ComponentLoader{label="Preview" componentName="CompareAutoplayDemo" type="examples" id="compare"}
+::
+
+Custom Content with AutoPlay
+
+::ComponentLoader{label="Preview" componentName="CompareCustomContentDemo" type="examples" id="compare"}
+::
+
+## API
+
+| Prop Name                 | Type                | Default          | Description                               |
+| ------------------------- | ------------------- | ---------------- | ----------------------------------------- |
+| `firstImage`              | `string`            | `""`             | URL of the first image                    |
+| `secondImage`             | `string`            | `""`             | URL of the second image                   |
+| `firstImageAlt`           | `string`            | `"First image"`  | Alt text for first image                  |
+| `secondImageAlt`          | `string`            | `"Second image"` | Alt text for second image                 |
+| `class`                   | `string`            | `""`             | Additional classes for the component      |
+| `firstContentClass`       | `string`            | `""`             | Classes applied to first content wrapper  |
+| `secondContentClass`      | `string`            | `""`             | Classes applied to second content wrapper |
+| `initialSliderPercentage` | `number`            | `50`             | Initial position of slider (0-100)        |
+| `slideMode`               | `"hover" \| "drag"` | `"hover"`        | Interaction mode for the slider           |
+| `showHandlebar`           | `boolean`           | `true`           | Show/hide the handle bar                  |
+| `autoplay`                | `boolean`           | `false`          | Enable/disable autoplay                   |
+| `autoplayDuration`        | `number`            | `5000`           | Duration of autoplay cycle in ms          |
+
+| Event Name          | Payload  | Description                                  |
+| ------------------- | -------- | -------------------------------------------- |
+| `update:percentage` | `number` | Emitted when slider position changes (0-100) |
+| `drag:start`        | -        | Emitted when dragging starts                 |
+| `drag:end`          | -        | Emitted when dragging ends                   |
+| `hover:enter`       | -        | Emitted when mouse enters component          |
+| `hover:leave`       | -        | Emitted when mouse leaves component          |
+
+| Slot Name        | Default Content                                   | Description                                                                                                                       |
+| ---------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `first-content`  | `<img>` element if `firstImage` prop is provided  | Content shown on the left/first side of the comparison. Has full access to component width/height.                                |
+| `second-content` | `<img>` element if `secondImage` prop is provided | Content shown on the right/second side of the comparison. Has full access to component width/height.                              |
+| `handle`         | Default slider handle with dots icon              | Custom handle for the slider. Automatically positioned at the dividing line. Should handle positioning with absolute positioning. |
+
+## Component Code
+
+You can copy and paste the following code to create this component:
+
+::code-group
+
+::CodeViewerTab{filename="Compare.vue" language="vue" componentName="Compare" type="ui" id="compare"}
+::
+
+::CodeViewerTab{filename="StarField.vue" language="vue" componentName="StarField" type="ui" id="compare"}
+::
+
+::
+
+## Credits
+
+- Credits to [M Atif](https://github.com/atif0075) for this component.
+
+- Inspired from [Aceternity UI's Compare](https://ui.aceternity.com/components/compare).
diff --git a/public/images/Inspira-dark.png b/public/images/Inspira-dark.png
new file mode 100644
index 0000000..03b26e7
Binary files /dev/null and b/public/images/Inspira-dark.png differ
diff --git a/public/images/Inspira-light.png b/public/images/Inspira-light.png
new file mode 100644
index 0000000..f85b507
Binary files /dev/null and b/public/images/Inspira-light.png differ