Side By Side Slide

Component 227

About

An image comparison slider with a spring-animated divider that follows the cursor on hover to reveal before/after images.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Side By Side Slide to your project and fits it to your theme.

Code

How Side By Side Slide is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { SideBySideSlide } from "@/components/ui/side-by-side-slide";

interface SideBySideSlideDemoProps {
  orientation?: "horizontal" | "vertical";
  initialPosition?: number;
  dividerColor?: string;
  dividerWidth?: number;
  showHandle?: boolean;
  handleSize?: number;
  handleColor?: string;
  cursor?: "none" | "col-resize" | "row-resize" | "pointer";
  stiffness?: number;
  damping?: number;
}

export default function SideBySideSlideDemo({
  orientation = "horizontal",
  initialPosition = 50,
  dividerColor = "white",
  dividerWidth = 2,
  showHandle = true,
  handleSize = 40,
  handleColor = "white",
  cursor = "none",
  stiffness = 300,
  damping = 30,
}: SideBySideSlideDemoProps) {
  return (
    <div className="flex items-center justify-center p-8">
      <div className="w-full max-w-2xl overflow-hidden rounded-xl">
        <SideBySideSlide
          beforeImage="https://cdn.21st.dev/assets/mirror/8c/8c1eb5bf7bf730477c5332303fdf13aeb95787ade61b54a7d94fbfba13907a4f.png"
          afterImage="https://cdn.21st.dev/assets/mirror/16/165a7ce13698c85d5240f7ce4a34ebef433cec2f2dd57ce4922c06e1fa49524d.png"
          beforeAlt="Modern house exterior"
          afterAlt="Modern house interior"
          orientation={orientation}
          initialPosition={initialPosition}
          dividerColor={dividerColor}
          dividerWidth={dividerWidth}
          showHandle={showHandle}
          handleSize={handleSize}
          handleColor={handleColor}
          cursor={cursor}
          springOptions={{ stiffness, damping }}
          className="aspect-video"
        />
      </div>
    </div>
  );
}