Does FAQ Search work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

FAQ Search

Help-centre FAQ with instant search, highlighted matches and topic chips.

Type: FAQ section
Styles: Light, Minimal
Licence: Charcoal UI Pro

About FAQ Search

FAQ Search lets visitors find answers themselves. They type and the accordion filters instantly, with the matching words highlighted in both questions and answers, topic chips to narrow it down and a result count.

It is a full-width faq section for React and Tailwind CSS 4, in a light and minimal style. Preview it at any width above, then install it with one command.

When to use FAQ Search

Help centres and support pages.
Payments and database products with many questions.
Bootcamps and universities.
Marketplaces and services.

How it is built

Matching is case-insensitive and local, the first match opens automatically, and an empty search offers a link to a human.

It is composed from Accordion, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with FAQ Search

FAQ Search is part of 7 full templates, so you can see it in a finished page.

Relay template: Status updates that write themselves.
Tidepool template: Postgres that scales to zero and back.
Fixwell template: Book a pro in two minutes.
Ledger template: Bookkeeping that reads like a newspaper.
Payline template: Accept money anywhere with one API.
Forkcamp template: From zero to hired in 16 weeks.
Quadrangle template: Programmes, people and open days.
FAQ Split: A free React FAQ section: heading and contact on the left, a springy accordion
FAQ Grid: A React FAQ grid for short answers with a contact card
FAQ Chat: A chat-style React FAQ where a teammate types each answer back
FAQ Support: A React FAQ accordion with a sticky support card, live status and reply time
Accordion: An animated React accordion: height springs open, the chevron flips, content fades in

Install FAQ Search

npx shadcn@latest add @charcoal/faq-search

FAQ Search is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does FAQ Search work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Built from

Accordion: Bouncy accordion: height springs open, the chevron flips, and content fades up a beat later.

FAQ Search as Markdown