Can answers contain links or formatting?

Yes. answer accepts any React node, so you can use links, lists or bold text. Only plain-text answers are added to the jsonLd structured data, since the schema needs text.

How do categories work?

Give items a category. When two or more different categories exist, tabs appear automatically with an All tab first; with one or none, no tabs are shown.

Can several answers be open at once?

Set allowMultiple. By default opening one answer closes the others. defaultOpen picks the answer open on load (0 is the first, -1 opens none).

Each question is a button inside an h3 with aria-expanded and aria-controls, and each answer is a region labelled by its question. The tabs use tab roles, the search box has a label for screen readers, and motion is turned off when the visitor prefers reduced motion.

How do I hide the contact card?

Leave contactHref out. Set it to show the card, and change contactTitle, contactText and contactLabel to fit your wording.

React FAQ Section Component: Free, Tailwind & shadcn/ui

About the FAQ Section component

FAQ Section is a ready-made questions and answers block. On large screens the heading, a short description and a Still have questions? card sit on the left and the questions on the right; on phones everything stacks and the contact card moves under the list. Clicking a question opens its answer with a smooth height animation while the plus icon turns into an x.

When items have two or more categories, tabs appear above the list (All plus one per category) with a sliding highlight. searchable adds a search box that filters by question and answer text and shows a friendly message when nothing matches. With jsonLd on, the section also outputs schema.org FAQPage data so search engines can show your answers in results.

When to use it

Use it near the bottom of a landing page, on a pricing page under the plans, or on a help or support page.

Turn on searchable and categories when you have more than ten questions, and jsonLd when the page is public and you want rich results in Google.

Installation

Add the FAQ Section component to your project with the shadcn CLI. It lands in components/faq-section.tsx as plain React + Tailwind CSS source you own and can edit.

Install

Copied!

npx shadcn@latest add @reactframe/faq-section

Or copy the source by hand and install its dependencies:

Install

Copied!

npm install motion clsx tailwind-merge

Props

<FaqSection /> accepts 14 props, all optional.

Prop	Type	Default
items	{ question: string; answer: React.ReactNode; category?: string }[]	DEFAULT_ITEMS
eyebrow	string	"FAQ"
title	string	"Frequently asked questions"
description	string	"Everything you need to know about the product and billing. Can't find what you're lookin…
allowMultiple Let more than one answer be open at once.	boolean	false
defaultOpen Index (in items) of the answer open on load. Pass -1 for none.	number	0
searchable Show a search box that filters questions and answers.	boolean	false
contactTitle The "still have questions" card. Hidden when contactHref is not set.	string	"Still have questions?"
contactText	string	"Our team usually replies within a few hours."
contactLabel	string	"Contact support"
contactHref	string	—
jsonLd Add schema.org FAQPage JSON-LD for the items with plain-text answers.	boolean	false

items
{ question: string; answer: React.ReactNode; category?: string }[]
Default: DEFAULT_ITEMS
eyebrow
string
Default: "FAQ"
title
string
Default: "Frequently asked questions"
description
string
Default: "Everything you need to know about the product and billing. Can't find what you're lookin…
allowMultiple
Let more than one answer be open at once.
boolean
Default: false
defaultOpen
Index (in items) of the answer open on load. Pass -1 for none.
number
Default: 0
searchable
Show a search box that filters questions and answers.
boolean
Default: false
contactTitle
The "still have questions" card. Hidden when contactHref is not set.
string
Default: "Still have questions?"
contactText
string
Default: "Our team usually replies within a few hours."
contactLabel
string
Default: "Contact support"
contactHref
string
jsonLd
Add schema.org FAQPage JSON-LD for the items with plain-text answers.
boolean
Default: false

Show all 14 props

theme	"dark" \| "light"	"dark"
className	string	—

theme
"dark" | "light"
Default: "dark"
className
string

npm dependencies

Installed for you by the shadcn CLI.

FAQ Section FAQ

Can answers contain links or formatting?: Yes. answer accepts any React node, so you can use links, lists or bold text. Only plain-text answers are added to the jsonLd structured data, since the schema needs text.
How do categories work?: Give items a category. When two or more different categories exist, tabs appear automatically with an All tab first; with one or none, no tabs are shown.
Can several answers be open at once?: Set allowMultiple. By default opening one answer closes the others. defaultOpen picks the answer open on load (0 is the first, -1 opens none).
Is it accessible?: Each question is a button inside an h3 with aria-expanded and aria-controls, and each answer is a region labelled by its question. The tabs use tab roles, the search box has a label for screen readers, and motion is turned off when the visitor prefers reduced motion.
How do I hide the contact card?: Leave contactHref out. Set it to show the card, and change contactTitle, contactText and contactLabel to fit your wording.

FAQ Section React component