How many questions should a FAQ section have?

Five to eight is the sweet spot: enough to answer real objections about price, setup and support, short enough to scan. Put the question people ask sales most often first, and link to a contact page for anything else.

Does FAQ Split 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 Split

Heading and contact link on the left, a springy accordion on the right.

Type: FAQ section
Styles: Minimal, Dark
Licence: Free, MIT

About FAQ Split

FAQ Split puts the heading and a contact link on the left and a springy accordion of questions on the right.

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

When to use FAQ Split

Pricing page FAQs.
Product and support pages.
Landing page objections.
Onboarding help.

How it is built

Accordion handles the panels; questions and answers are an array prop.

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 Split

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

Ember template: An AI product site that glows.
Hearth template: A home for your app launch.
Quill template: Ask your data, get answers.
Cadence template: Book meetings without the back-and-forth.
Lane template: Catch the bug in review, not in prod.
Keystone template: Login, done in an afternoon.
Copyhouse template: Words that sell, from one writer.
Halo template: One product, every angle.
Timberline template: Cabins within three hours of the city.
Tally template: Cards, receipts and budgets in one place.
Rota template: Shift planning, built by nurses.
Nocturne template: A bedside device that fixes your nights.
Cohort template: Sell a course like a creator.
Commons template: Bring your members home.
Nova template: Take pre-orders before you ship.
Pilot template: Recruit your first beta testers.
FAQ Grid: A React FAQ grid for short answers with a contact card
FAQ Search: A help-centre React FAQ with instant search, highlighted matches and topics
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 Split

npx shadcn@latest add https://charcoalui.com/r/faq-split.json

FAQ Split is free and MIT licensed. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

How many questions should a FAQ section have?: Five to eight is the sweet spot: enough to answer real objections about price, setup and support, short enough to scan. Put the question people ask sales most often first, and link to a contact page for anything else.
Does FAQ Split 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 Split as Markdown