UI components / Sections
Before/After Slider: a React and Tailwind UI component
Drag the handle (or use arrow keys) to compare two images or states.
Open the live Before/After Slider preview.
About sections components
Section components are larger building blocks for landing pages: heroes, pricing, testimonials and comparisons. Give them real headings and content in HTML, and keep the motion in the background so the message stays readable.
Install the Before/After Slider
- Create
components/ui/before-after-slider.tsxin your React + Tailwind project. - Paste the code. It only imports React; keyframes are defined inside the file.
- Import the named component where you need it. The default export is a ready-made demo you can delete.
Frequently asked questions
Is the Before/After Slider component free?
Anyone can open the live preview. Copying the code is included with a Scrollhaus plan.
What do I need to use it?
A React project with Tailwind CSS: Next.js, Vite, Lovable or Bolt. The file only imports React; its animations ship inside the component.
Is it accessible?
It uses native elements and ARIA attributes where needed, keeps keyboard focus visible and works without a mouse.
More sections
- Aurora Hero: A hero section on a slow, glowing aurora background that leans toward the cursor.
- Pricing Toggle: Monthly/yearly switch with a sliding pill; prices count to their new value.
- Testimonial Marquee: Two rows of review cards drifting in opposite directions; hover pauses a row.
- Smooth Accordion: FAQ items that open with a real height animation and a rotating plus.