FAQ Grid
Questions laid out in a grid with a contact card, for short answers.
- Type: FAQ section
- Styles: Light, Minimal
- Licence: Charcoal UI Pro
About FAQ Grid
FAQ Grid lays questions out in a grid with a contact card, perfect when answers are short.
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 Grid
- Waitlist and launch pages.
- Simple products.
- Event FAQs.
- Help centre summaries.
How it is built
Scroll Reveal staggers the cards as the grid scrolls in.
It is composed from Scroll Reveal, 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 Grid
FAQ Grid is part of 26 full templates, so you can see it in a finished page.
- Ashfall template: Work first. Words second.
- Flint template: Collect your first thousand emails.
- Meridian template: The CRM for teams under fifty.
- Aperture template: Know what users do, and why.
- Glyph template: Four thousand icons, one style.
- Patchnote template: Release notes people actually read.
- Fieldwork template: Senior engineers, on retainer.
- Roastery template: Build a box, save every delivery.
- Steep template: Loose-leaf, sold like it matters.
- Lumi template: Drag the slider, buy the app.
- Dropline template: Built for the hour everything sells out.
- Juniper template: Wood fire, small plates, booked tables.
- Summit template: Memberships, classes and coaches.
- Signal template: Sell out a conference.
- The Margin template: A publication with paying readers.
- Townhall template: Sessions people register for.
- Vault template: Save without thinking about it.
- Seedling template: Raise money for something that grows.
- Breathe template: Ten quiet minutes a day.
- Darkroom template: A course people finish.
- Sprout template: Coding classes kids beg to go to.
- Tutorly template: The right tutor, this week.
- Patron template: Let your audience fund the work.
- Hive template: Desks, rooms and people worth sitting near.
- Manifest template: Turn launch day into a sales day.
- Kickstart template: Back the first production run.
- FAQ Split: A free React FAQ section: heading and contact on the left, a springy accordion
- 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
- Scroll Reveal: A React scroll reveal: fade content in from any direction or out of a blur
Install FAQ Grid
npx shadcn@latest add @charcoal/faq-gridFAQ Grid 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
- When should I use a grid FAQ instead of an accordion?
- When every answer fits in one or two sentences. A grid shows all of them at once, which is faster to scan on a launch or waitlist page. For long answers, the FAQ Split accordion keeps the page short.
- Does FAQ Grid 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
- Scroll Reveal: Wrap anything to fade it in as it scrolls into view, from any direction or out of a blur. Several children stagger.