Compare

v1.0.0

Features

A comparison component between two images with slide or drag interaction to compare before and after states.

Dependencies

framer-motion

lucide-react

Installation

Add this component to your project

CLI Installation

npx shadcn@latest add https://ui.authmate.xyz/registry/compare.json

Manual Installation

// 1. Install dependencies
npm install framer-motion lucide-react

// 2. Copy the component code to components/ui/compare.tsx

// 3. Add the following to your tailwind.config.js if not already present:
module.exports = {
  content: [
    "./components/**/*.{js,ts,jsx,tsx}",
    // ... other paths
  ],
  theme: {
    extend: {
      cursor: {
        'ew-resize': 'ew-resize',
        'ns-resize': 'ns-resize',
      }
    }
  },
  // ... rest of config
}

// 4. Usage example:
import { Compare } from "@/components/ui/compare"

export default function MyComponent() {
  return (
    <Compare
      beforeImage="/before.jpg"
      afterImage="/after.jpg"
      beforeLabel="Before"
      afterLabel="After"
      direction="horizontal"
    />
  )
}

Props

Component properties and their types

beforeImage

string

default: ''

URL or path to the before image

afterImage

string

default: ''

URL or path to the after image

beforeLabel

string

default: 'Before'

Label for the before image

afterLabel

string

default: 'After'

Label for the after image

direction

'horizontal' | 'vertical'

default: 'horizontal'

Direction of the comparison slider

initialPosition

number

default: 50

Initial position of the slider (0-100)

showLabels

boolean

default: true

Show before/after labels

showHandle

boolean

default: true

Show the drag handle

onPositionChange

(position: number) => void

default: undefined

Callback when slider position changes

className

string

default: ''

Additional CSS classes

height

string | number

default: '400px'

Height of the comparison container

disabled

boolean

default: false

Disable interaction

Examples

4 different usage examples

Basic Image Comparison

import { Compare } from '@/components/ui/compare'

export default function Example() {
  return (
    <Compare
      beforeImage="/placeholder.svg?height=400&width=600"
      afterImage="/placeholder.svg?height=400&width=600"
      beforeLabel="Original"
      afterLabel="Enhanced"
    />
  )
}

Registry

View the component registry file

View Registry

Live Preview

Interactive

4 examples available

Before

After