shadcn.io is not affiliated with official shadcn/ui
FAQ Accordion Hero Block for React
A compact hero on ruled bands between solid rails: a headline and a Shine Button, then a band with four common questions in an accordion that opens one at a time, beside a short note.
Installation
Overview
A compact hero with an inline FAQ accordion, for React with Base UI, laid out on ruled bands between the page's solid rails. A header band holds a bold headline and one sentence for a fictional bookkeeping app at the start, and a Shine Button and an outline Button as links at the end. Under its rule, a second band is split by a hairline divider: a short "Before you start" note beside four questions in our Accordion, which answer the most common objections right below the calls to action. Each band draws its rule with + marks where it meets the rails and the divider. One answer opens at a time and any can be closed again; each panel slides open with the Accordion's own transition. The rest of the hero fades up once on load with CSS transitions, and nothing moves for visitors who ask for reduced motion. Made for SaaS product pages and pricing pages, where the setup time, the free plan or the cancellation terms are what stand between the visitor and the sign-up.
FAQ
How do I change the questions in the hero?
Edit the QUESTIONS array at the top of the file. Each entry has a question, an answer and an id, which is the accordion item's value: keep it stable and unique, so opening a question by default or tracking it doesn't depend on the order. Three to five short questions keep the hero compact (the file has four); answers are plain text, and a link inside one is underlined by the Accordion's own styles.
How do I open a question by default, or let several stay open?
Give Accordion a defaultValue with the ids to open, such as ["setup"], and add multiple to let several stay open at once.
How do keyboard and screen reader users use the accordion?
Each question is a button inside an h3, under the visible "Before you start" h2, so a screen reader can jump to the questions by heading. The button says whether its answer is expanded and which panel it controls. Tab moves between questions and Enter or Space opens or closes one.
The headline is the page's one h1.
How can I see which questions visitors open?
Listen to the accordion's change event and send the opened id to your analytics: the questions people open most are the objections to answer higher up, in the headline or the subtitle.
Use onValueChange: its first argument lists the open ids.
How does the FAQ hero fit on a phone?
Below the md breakpoint the header band stacks: the headline and sentence, then the two calls to action, which wrap onto their own row and sit on the first screen. The note and the questions follow in the second band, the divider turns into the band's rule, and a long question wraps beside its chevron. Nothing scrolls sideways down to 320px.
When should I answer questions in the hero instead of a separate FAQ section?
Put them in the hero when two or three objections block the sign-up, such as setup time, a free tier or cancellation, and the answer fits in two sentences. Keep a full FAQ section or page for ten or more questions across topics, and link to it from the last answer if you need both.
Related
- Pro
Checklist Hero
PricingA showcase hero for a single plan: the headline and the price in a card in card, over a grid of eight included features that share their hairlines.
- Pro
Centered Feature Cards Grid Hero
Features and tablesA showcase hero between solid rails: an announcement link, a centred headline and a Shine Button, over three feature cells with overshooting hairlines, each led by a greyscale vignette of the feature.
- Pro
Split Layout Feature Comparison Table Hero
Features and tablesA reverse split hero between solid rails: a compact comparison table in a framed figure beside a headline, a Shine Button and three trust points, with your column tinted.
- Pro
A centered pricing hero with Free and Pro side by side in one hairline band, the Pro cell tinted and holding the Shine Button, and a plan switch on phones.
- Pro
A compact centered hero that leads with its one price: a launch pill, a headline and a sentence, then the price in a hairline frame beside a Shine Button and three trust points.
- Pro
Centered Minimal Hero
Type and motionA compact centered type-only hero: a two-line headline with a muted second line, one sentence, a Shine Button and a second action, on faded rails.