Before After Comparison Slider
A production-ready before after comparison slider component for your Next.js application. Accessible, customizable, and built with modern standards.
Before/After Slider
Responsive image comparison with a tactile handle and theme‑aware surfaces. Labels and background patterns are tuned for clarity in light mode.
Features
- Drag handle with precise constraints
- Token‑based bars and labels
- Subtle patterns for visual separation
Usage
- Wrap in a container and provide your images.
- Ensure foreground/background tokens are configured.
- Image diff
- Product showcase
| Name | Type | Default | Description |
|---|---|---|---|
| beforeSrc | string | - | Image source for the “before” side. |
| afterSrc | string | - | Image source for the “after” side. |
| className | string | - | Additional CSS classes. |
Most components here are inspired by outstanding libraries and creators in the ecosystem. I don’t claim to be the original author — this is my space for learning, rebuilding, and understanding great work at a deeper level.
I’m still a student of the craft, constantly studying the best and translating what I learn through my own perspective. Every piece reflects curiosity, respect for the community, and small creative touches that feel true to me.
I’ve done my best to credit inspirations properly. If anything is missing or inaccurate, I truly appreciate a message so it can be corrected with care.