An FAQ section is the only block on a marketing page that is written in the reader's words rather than yours. That is exactly why it earns its place twice: once for the person deciding whether to sign up, and once for the engines that answer questions by quoting pages that already contain the question.
75 public components on 21st have "accordion" in the name and 37 say "FAQ". The visual variety is wide; the part that decides whether the section works is narrower and mostly invisible.
The plain accordion
A list of questions, one panel at a time. Accordion by originui is the standard shape, and Accordion 05 and Accordion 03 by Ali Imam are styled variants of it.
The one decision to make deliberately: whether more than one panel can be open. Single-open keeps the page short and forces the reader to close one thing to read another, which is annoying when they are comparing two answers. Multi-open is usually the kinder default for an FAQ and the wrong default for a settings page. Neither is a design detail; both change how the content is read.
The FAQ section
The assembled block, question list plus heading plus a route out to support. FAQ by kokonutd, Faq 5 from Shadcnblocks.com and FAQ monocrhome are the conventional versions.
Two variants worth knowing. FAQ tabs by vaib215 groups questions into categories, which is what you need past roughly a dozen. FAQ Chat Accordion by anshuman008 presents the answers as a conversation, which suits a product whose support surface is a chat.
The accordion that is not an FAQ
Two components in this family use the mechanic for something else entirely. Interactive Image Accordion by Le Thanh is the horizontal panel expander: images that widen as the pointer moves across them. Feature 197 from Shadcnblocks.com and Feature Accordion Section by Ruixen UI use the same expand-collapse behaviour to walk through product features one at a time.
Worth separating when you search: an image accordion is a gallery, and it has none of the search benefits below.
The part that is worth real effort
An FAQ block is one of the few pieces of marketing markup with a documented structured-data type behind it. FAQPage schema, emitted as JSON-LD, tells a search engine that this page contains question-and-answer pairs, and the same markup is the cleanest possible signal to any answer engine reading the page.
Four rules decide whether that works.
The visible answer and the marked-up answer must be identical. Structured data that does not match what a reader sees is the fastest way to lose the feature entirely. Generate both from one array. That is how the FAQ on this page works, and it is why the two can never drift.
Content collapsed behind an accordion is still indexed, if it is in the HTML. Hidden-by-default text is treated the same as visible text as long as it is present in the markup. Rendering the answer only after a click, in JavaScript, is what makes it invisible.
One FAQ block per page, and different questions per page. The same block copied across forty pages is a duplication signal, not forty chances. Write the questions this page actually gets.
Write the question the way it is asked. "Do you offer a free trial?" is what someone types. "Trial availability" is what someone with a spreadsheet writes. The first one matches a real query; the second matches nothing.
The behaviour, in one paragraph
The accessible contract is small and consistently broken. The trigger is a real <button> inside a heading element, not a <div> with a click handler, so screen readers can navigate by heading. It carries aria-expanded reflecting the state and aria-controls pointing at the panel. The panel is hidden with hidden or display: none rather than zero height with overflow: hidden, or its links stay in the tab order while invisible. And the height animation runs on grid-template-rows from 0fr to 1fr, or with the newer interpolate-size: allow-keywords, which is what finally makes animating to height: auto possible without measuring anything.
Where else to look
The honest list of alternatives, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| shadcn/ui | The primitive with the keyboard and ARIA already correct | No FAQ section, no schema, no categories |
<details> / <summary> | Zero JavaScript, native semantics, works before hydration | Limited styling of the marker, and animation is fiddly |
| Radix / Base UI | Behaviour when you own every pixel | Unstyled |
| 21st | Assembled FAQ sections, categorised and conversational variants | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue. The 21st MCP covers the same ground without leaving the editor: ask Claude, Cursor or Codex for an FAQ section, get the previews inline, and let the agent write the file.
Frequently asked
- Does content hidden in an accordion still get indexed?
- Yes, as long as it is in the HTML. Text that is collapsed by default is treated the same as visible text. What breaks indexing is rendering the answer only after a click, in JavaScript, so the markup that arrives from the server contains the question and nothing else.
- Should FAQ answers use FAQPage schema?
- Yes, with one condition: the marked-up answer and the visible answer must be identical. Structured data that does not match what a reader sees is the fastest way to lose the feature. Generate both from one array so the two cannot drift, and write different questions on every page rather than copying one block across the site.
- Should more than one accordion panel be open at once?
- For an FAQ, usually yes. Single-open forces a reader comparing two answers to close one to read the other. For a settings page or a checkout, single-open keeps the page short and the focus narrow. It is a content decision, not a styling one.
- How do you animate an accordion to auto height?
- Animate grid-template-rows from 0fr to 1fr on a wrapper, which needs no measurement, or use interpolate-size: allow-keywords where it is supported, which finally makes animating to height: auto possible. Keep the panel hidden with hidden or display: none when closed, or the links inside stay in the tab order while invisible.