Hero Block Comparison

Show the transformation. This React hero block features an interactive before/after comparison slider that lets users drag to reveal the difference your product makes. Perfect for image editing tools, website builders, or any product where visual transformation tells the story. Built with shadcn/ui Button and Badge components plus a custom slider component. The comparison uses CSS clip-path for smooth, performant reveals. Touch-friendly for mobile with both drag and tap-to-move interactions. Perfect for photo editors, design tools, cleaning services, renovation companies, or any before/after showcase.

Hero Block Comparison preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/hero-20.json

npx shadcn@latest add https://www.shadcn.io/registry/hero-20.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/hero-20.json

bunx shadcn@latest add https://www.shadcn.io/registry/hero-20.json

Related Components

FAQ