FAQ Section With Accordion, Search and Contact Card

A searchable FAQ: topic filters with live counts, highlighted matches, an accessible accordion and a contact card beside it.

npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-merge

Features

A search box that filters questions and answers as you type, marking every match
Topic filters with counts that follow the search, and a sliding active face
An accessible accordion: real buttons with aria-expanded, answer regions, smooth height, one open at a time
A calm empty state that turns the search into an email with the question as its subject
A contact card with a monogram, reply time, copyable email and a booking button, sticky on desktop
Two columns on desktop, stacked on phones; answers open instantly for reduced motion

Best for: Agencies, SaaS and service businesses whose buyers ask the same ten questions before they book.

npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-merge

Then copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.

Prop	Type	Default	Description
title	string	-	The headline's first line.
subtitle	string	-	Optional second line, in grey.
eyebrow	string	-	Optional small mono label above the headline.
categories	string[]	-	Topics in filter order.
questions	{ category; question; answer }[]	-	The questions; each names one of the categories. The first starts open.
contact	FaqContact	-	The card beside the list: title, description, person { name, role }, replyNote, email, cta and an optional footnote.
copy	Partial<FaqSearchCopy>	-	Overrides for the search's words: placeholder, allLabel, noResultsLabel, noResultsHint, askLabel, clearLabel.
className	string	-	Extra classes for the section.

Is the FAQ Section With Accordion, Search and Contact Card FAQ section free to use?

Yes. FAQ Section With Accordion, Search and Contact Card is free to copy into your own projects. Open the Code tab and paste the files into your app.

Does FAQ Section With Accordion, Search and Contact Card work with Next.js and React?

Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).

Can I use FAQ Section With Accordion, Search and Contact Card in JavaScript instead of TypeScript?

Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.

What does FAQ Section With Accordion, Search and Contact Card need installed?

motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.

Is FAQ Section With Accordion, Search and Contact Card accessible?

Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.