Compare 9 - Vertical before/after wipe with example pickerPro
A before/after comparison where a horizontal divider is dragged up and down with pointer or keyboard to wipe between two images, plus thumbnails to switch between example pairs. Use it to showcase photo edits, renovations or product treatments where a top-to-bottom reveal reads naturally.
About Compare 9
A before/after comparison where a horizontal divider is dragged up and down with pointer or keyboard to wipe between two images, plus thumbnails to switch between example pairs. Use it to showcase photo edits, renovations or product treatments where a top-to-bottom reveal reads naturally.
Compare 9 is a compare block for React and Tailwind CSS, included in Chocolate UI Pro. It ships as 105 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- compare
- before after
- slider
- drag
- images
- showcase
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add compare-09Dependencies installed automatically: lucide-react.
Uses: reveal, utils.
Usage
import Compare09 from "@/components/blocks/compare-09"
export default function Page() {
return <Compare09 />
}