title: Compare
description: Slide to compare any two pieces of content - images, designs, code, or custom elements
---

```vue
<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>

```

## Install using CLI

```vue
<InstallationCli component-id="compare" />
```

## Install Manually

Copy and paste the following code in the same folder

::code-group

:CodeViewerTab{label="Compare.vue" language="vue" componentName="Compare" type="ui" id="compare"}
:CodeViewerTab{label="StarField.vue" language="vue" componentName="StarField" type="ui" id="compare"}

::

## Examples

Drag handle with custom content

```vue
<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>

```

AutoPlay

```vue
<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="https://cdn.inspira-ui.com/images/Inspira-light.png"
        second-image="https://cdn.inspira-ui.com/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>

```

Custom Content with AutoPlay

```vue
<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>

```

## API

### Props

| 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          |

### Events

| 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          |

### Slots

| 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. |

## Credits

- Credits to [M Atif](https://github.com/atif0075) for this component.

- Inspired from [Aceternity UI's Compare](https://ui.aceternity.com/components/compare).