Modern FAQ Accordion with Smooth Animations

Modern FAQ Accordion with Smooth Animations

A clean, accessible FAQ section with smooth expand/collapse animations and modern typography.

Features

• Accordion-style interaction - Click to expand/collapse answers
• Smooth height transitions - Uses ref-based scrollHeight for fluid animations
• Animated icons - Plus/X icons with hover rotate effect
• Framer Motion scroll animations - Title and subtitle fade up when entering viewport
• Fully responsive - Mobile-first design with breakpoints at sm and md
• Large typography - Scales from 25px to 45px on title, 18px to 26px on questions
• Light gray background - Clean, minimal aesthetic (#f5f5f5)

Installation

npm install framer-motion lucide-react

Dependencies

This component has no shadcn/ui dependencies - it uses pure CSS and custom HTML.

Usage

import FAQ from '@/components/faq-accordion'

export default function Page() {
  return <FAQ />
}

How It Works

1. State management: useState tracks which FAQ is open
2. Refs: useRef array stores references to answer divs
3. scrollHeight: Measures the full height of answer content
4. Transition: CSS transition animates between 0px and full height
5. Icon toggle: Plus icon changes to X when expanded

Customization Options

• FAQ data: Update the faqs array with your own questions/answers
• : Modify background, text colors in the className strings