Before/After Image Slider

Component 121

About

An interactive image comparison component with a draggable divider that reveals a before and after image, supporting horizontal and vertical orientations.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Before/After Image Slider to your project and fits it to your theme.

Code

How Before/After Image Slider is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Reveal1 } from "@/components/ui/reveal1";

export default function Default() {
  return (
    <Reveal1
      heading="See the Transformation"
      description="Drag the slider to compare the before and after results. Experience the difference our solution makes."
      beforeImage={{
        src: "https://cdn.21st.dev/assets/mirror/80/80b345ab0dcfea4a00aee2ec057b593b58393356da98f1c9dbfa88af4139f83e.jpg",
        alt: "Before",
      }}
      afterImage={{
        src: "https://cdn.21st.dev/assets/mirror/73/738507f9b55be524b973f5298ca2661bf7fa22eeab77c8b6280d7af07c66a082.jpg",
        alt: "After",
      }}
      beforeLabel="Before"
      afterLabel="After"
      showLabels
    />
  );
}