Comparison Slider - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/comparison-slider

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { ComparisonSlider } from "@/components/ui/comparison-slider"

<ComparisonSlider
  beforeImage={{ src: "/before.jpg", alt: "Before" }}
  afterImage={{ src: "/after.jpg", alt: "After" }}
  beforeLabel="Before"
  afterLabel="After"
/>

API Reference

Prop	Type	Default	Description
`beforeImage`*	`{ src: string; alt: string }`	—	Left/before image.
`afterImage`*	`{ src: string; alt: string }`	—	Right/after image.
`beforeLabel`	`string`	`"Before"`	Label for the left side.
`afterLabel`	`string`	`"After"`	Label for the right side.
`defaultPosition`	`number`	`50`	Initial slider position (0-100).
`aspectRatio`	`string`	`"aspect-video"`	Tailwind aspect ratio class.
`className`	`string`	—	Additional CSS classes.

Original

Color Graded

Drag to compare