About
A draggable before/after slider that reveals one image or content block over another to compare two versions side by side.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Image Diff Slider to your project and fits it to your theme.
Code
How Image Diff Slider is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Diff, DiffItem1, DiffItem2, DiffResizer } from "@/components/ui/diff";
export default function DiffDemo() {
return (
<div className="mx-auto w-full max-w-xl">
<Diff className="aspect-video w-full rounded-lg">
<DiffItem1>
<img
alt="اصفهان"
src="https://cdn.21st.dev/assets/localized/8f4a23143a00553bed2e1d6f4dc677088576d5ac25deba5b0d655701af40a7ff.jpg"
/>
</DiffItem1>
<DiffItem2>
<img
alt="اصفهان تار"
src="https://cdn.21st.dev/assets/localized/8f4a23143a00553bed2e1d6f4dc677088576d5ac25deba5b0d655701af40a7ff.jpg"
className="scale-105 blur-sm"
/>
</DiffItem2>
<DiffResizer />
</Diff>
</div>
);
}
Dependencies
More by miladjoodi
View all
Card
Drag Scroll
Context Menu