v0
v0 prompt for an FAQ section
This prompt gets v0 to build a FAQ accordion on shadcn's Radix primitive, so keyboard and ARIA behavior arrive correct instead of hand-rolled. Questions are framed as purchase objections rather than documentation, which is what makes the section earn its place before the final CTA. The customizer feeds the style, palette, typography, and motion lines.
Last updated
Prompt
Build a FAQ section for the landing page of {{product}} in v0 — one self-contained FAQSection component (React + Tailwind + shadcn/ui) I can drop in near the end of the page, just before the final CTA band, aimed at {{audience}}.
Use the shadcn Accordion primitive with type="single" collapsible so exactly one answer is open at a time — opening a question closes the previous one. Note in a code comment that type="multiple" is the one-line switch if I later want several open. Keyboard and screen-reader behavior must come through Radix intact: Enter/Space toggles, arrow keys move focus between triggers, and each trigger is a real button wired via aria-expanded and aria-controls to its panel. Do not rebuild the accordion by hand with divs and onClick.
Section anatomy:
1. Left-aligned header: kicker ("Questions"), h2, and one line inviting the reader to skim.
2. Six accordion items. Write the questions as {{audience}}'s actual pre-purchase objections about {{product}}: cost, migration or setup effort, security and data handling, what happens if it doesn't work out, how it compares to doing nothing, and support. Phrase each in first person ("Can I ..."); answer in 2–3 sentences ending on a concrete fact, never "it depends".
3. A closing row under the accordion: "Still deciding?" plus a link-style button labeled "{{cta}}" pointing at the page's primary action.
Visual direction:
{{style}}
Palette: {{palette}}
Typography: {{type}}
Motion: {{motion}}
Spacing and responsive:
- Section padding around py-20; items separated by hairline dividers, not boxed cards; question rows get tap targets of at least 48px.
- On mobile the header stacks above the accordion at full width; on desktop the layout may split header left, accordion right in a 1:2 grid.
Verify after generation: only one panel opens at a time; arrow keys traverse all six triggers; the chevron rotates on the open item; the "{{cta}}" row sits below the last item; the questions read as objections, not feature descriptions.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Your customized prompt
Build a FAQ section for the landing page of a project management SaaS in v0 — one self-contained FAQSection component (React + Tailwind + shadcn/ui) I can drop in near the end of the page, just before the final CTA band, aimed at engineering managers at startups.
Use the shadcn Accordion primitive with type="single" collapsible so exactly one answer is open at a time — opening a question closes the previous one. Note in a code comment that type="multiple" is the one-line switch if I later want several open. Keyboard and screen-reader behavior must come through Radix intact: Enter/Space toggles, arrow keys move focus between triggers, and each trigger is a real button wired via aria-expanded and aria-controls to its panel. Do not rebuild the accordion by hand with divs and onClick.
Section anatomy:
1. Left-aligned header: kicker ("Questions"), h2, and one line inviting the reader to skim.
2. Six accordion items. Write the questions as engineering managers at startups's actual pre-purchase objections about a project management SaaS: cost, migration or setup effort, security and data handling, what happens if it doesn't work out, how it compares to doing nothing, and support. Phrase each in first person ("Can I ..."); answer in 2–3 sentences ending on a concrete fact, never "it depends".
3. A closing row under the accordion: "Still deciding?" plus a link-style button labeled "start a free trial" pointing at the page's primary action.
Visual direction:
Minimal dark style. Near-black canvas (#0A0A0B) with one elevated surface tone (#141416) for cards — never more than two surface steps. Hairline borders (1px, white at 8% opacity) instead of shadows; if a shadow is unavoidable use 0 1px 2px rgba(0,0,0,0.4) and nothing softer. Text in exactly three steps: white at 92% for headings, 60% for body, 40% for captions. Generous negative space — section padding at least 120px on desktop, 64px on mobile. The accent color appears only on interactive elements and one hero highlight, nowhere else.
Palette: a strict neutral ramp (white, #F5F5F5, #E5E5E5, #737373, #171717) carries the entire interface; pick one accent and use it only for primary CTAs, active states, and a single hero highlight. If the accent appears more than five times per viewport it stops being an accent. Keep semantic colors (success, error) desaturated so the accent stays in charge.
Typography: one geometric sans (a Futura/Poppins-class face) at three weights maximum (400/500/700). Scale: 64-88px hero, 32px section heads, 18px lede, 16px body, 13px caps labels with 0.08em tracking. Tight headline leading (1.05-1.1), relaxed body (1.6). Let the geometry carry the personality — no italics; weight and size do all hierarchy.
Motion: none. Zero scroll animations, zero entrance effects — the page is fully composed the instant it paints. Spend the motion budget on input feedback instead: 120-150ms ease-out color and transform transitions on hover and press states only. Hold this constraint absolutely; it is a statement, not an omission.
Spacing and responsive:
- Section padding around py-20; items separated by hairline dividers, not boxed cards; question rows get tap targets of at least 48px.
- On mobile the header stacks above the accordion at full width; on desktop the layout may split header left, accordion right in a 1:2 grid.
Verify after generation: only one panel opens at a time; arrow keys traverse all six triggers; the chevron rotates on the open item; the "start a free trial" row sits below the last item; the questions read as objections, not feature descriptions.Same task in other tools
Questions about this prompt
Why insist on shadcn's Accordion instead of letting v0 improvise one?
When v0 hand-rolls disclosure widgets it often ships divs with click handlers and no focus management. Radix under shadcn provides aria-expanded wiring, arrow-key traversal, and collapse animation for free, so the prompt pins it and the acceptance checks verify the behavior.
Should I switch to multiple-open mode?
Single-open keeps page height stable and forces a reading order, which suits objection handling on a landing page. Switch to type="multiple" when your answers are reference material people compare side by side — the prompt leaves a comment marking it as a one-line change.
How do I get better questions than the six listed categories?
Replace the category list with verbatim objections from sales calls or support tickets before pasting — real phrasing beats invented phrasing every time. Keep the first-person framing and the concrete-fact rule for answers; those two constraints are what make the section persuasive.
Part of the v0 landing-page cluster — start from the main v0 landing page prompt.