FAQ
FAQ - Animated accordion
An accordion whose panels expand with a height spring and a chevron rotation.
- Height animation
- AnimatePresence
- Accessible disclosure
Customize
Drag a slider and watch the preview respond live. Every control maps to a typed prop - what you tune is what you ship.
How the animation works
Each FAQ row is an accessible disclosure: clicking the question expands its answer panel with a height animation eased by a spring, and a presence transition handles the panel entering and leaving so it does not pop. The chevron rotates in sync with the open state to signal which item is active.
When to use it
- A frequently-asked-questions section near the bottom of a landing or pricing page
- Any place you need to present a lot of supporting detail without a wall of text
- A support or documentation page where collapsible answers keep the layout scannable
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- on / off
singleSingle panel open
Related components
Using this block
Buy it, then copy components/blocks/faq-accordion/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.