Sections

FAQ Section

Animated accordion FAQ with single / double column layout

Quick Preview

Frequently asked questions

If the answer depends on your project or next step, use the guidance pages for more context.

Start with the Foundation Track if routing, layouts, and rendering boundaries still feel unclear. It gives you the right baseline before advanced patterns.

Basic React familiarity helps, but the examples are structured so you can learn Next.js concepts while reinforcing the React ideas that matter in practice.

Use the components as study material first. Understand the structure, props, and tradeoffs, then adapt them to your own project with intent.

Treat each showcase as a design study. Read the tokens, hierarchy, spacing, and motion decisions to understand why the identity feels coherent.

Move on once you can read a small Next.js project comfortably and understand how routes, layouts, styling, and component composition fit together.

Use the guidance pages. Mentoring helps with decisions, guided implementation helps with execution, and learning support helps you regain momentum.

Installation

// Copy the component from
src/components/sections/FAQSection.tsx

Usage

import { FAQSection } from '@/components/sections/FAQSection'

const faqs = [
  { question: 'Where should I start?', answer: 'Begin with the Foundation Track...' },
  { question: 'Should I copy components directly?', answer: 'Study them first, then adapt them...' },
]

<FAQSection items={faqs} title="FAQ" />

Two-Column Layout

2-column FAQ grid

Two-column FAQ

If the answer depends on your project or next step, use the guidance pages for more context.

Start with the Foundation Track if routing, layouts, and rendering boundaries still feel unclear. It gives you the right baseline before advanced patterns.

Basic React familiarity helps, but the examples are structured so you can learn Next.js concepts while reinforcing the React ideas that matter in practice.

Use the components as study material first. Understand the structure, props, and tradeoffs, then adapt them to your own project with intent.

Treat each showcase as a design study. Read the tokens, hierarchy, spacing, and motion decisions to understand why the identity feels coherent.

Move on once you can read a small Next.js project comfortably and understand how routes, layouts, styling, and component composition fit together.

Use the guidance pages. Mentoring helps with decisions, guided implementation helps with execution, and learning support helps you regain momentum.

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a sections component named FAQ Section in React/Next.js.
Goal: recreate the same overall UI and behavior as the FAQ Section reference from a component gallery.
What it needs to communicate: Animated accordion FAQ with single / double column layout.

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Treat the result as a full-width section with strong layout rhythm and responsive spacing.
- Preserve headline hierarchy, supporting copy, and clear CTA emphasis.
- Avoid unnecessary dependencies unless the behavior truly requires them.
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- title: string — default "Frequently asked questions" — Section heading
- subtitle: string — Section sub-heading
- items: FAQItem[] — Array of { question, answer }
- columns: 1 | 2 — default 1 — Single or double column layout
- className: string — Additional CSS classes

Reference usage patterns:
- No examples were documented. Infer a sensible default presentation and one richer usage example.

Feature expectations:
- Animated open/close with max-height transition
- Single & double column layouts
- Only one item open at a time
- Accessible aria-expanded attribute
- Client Component (accordion state)

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

Prop	Type	Default	Description
`title`	`string`	`"Frequently asked questions"`	Section heading
`subtitle`	`string`	-	Section sub-heading
`items`	`FAQItem[]`	-	Array of { question, answer }
`columns`	`1 \| 2`	`1`	Single or double column layout
`className`	`string`	-	Additional CSS classes

Features

✓Animated open/close with max-height transition
✓Single & double column layouts
✓Only one item open at a time
✓Accessible aria-expanded attribute
✓Client Component (accordion state)