UI components / Sections
Smooth Accordion: a React and Tailwind UI component
FAQ items that open with a real height animation and a rotating plus.
Open the live Smooth Accordion 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 Smooth Accordion
- Create
components/ui/smooth-accordion.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 Smooth Accordion 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.
- Before/After Slider: Drag the handle (or use arrow keys) to compare two images or states.