Page blocksFAQ

Faq Accordion

A centered FAQ accordion with question/answer items and an optional CTA — the base of the FAQ family.

v0.2.0Page blockFAQ familyFAQ section

New in 0.2.0 Lists the block under the FAQ heading in the admin Blocks Drawer (admin.group). Needs Payload 3.25 or newer.

Installation

npx payload-components add faq-accordion

What it installs

Copies 3 source files into your project:

  • src/blocks/shared/faqFields.tsshared
  • src/blocks/FaqAccordion/config.ts
  • src/blocks/FaqAccordion/Component.tsx

…and makes 4 edits to wire the block into your project:

Registers the blocksrc/collections/Pages/index.ts
Maps the renderersrc/blocks/RenderBlocks.tsx
Regenerates typessrc/payload-types.ts
Regenerates the admin import mapsrc/app/(payload)/admin/importMap.js
faqFields.ts is shared source for this component family. Components that install the same path reuse that local copy, and re-running an install never overwrites a copy you have changed.

Re-running the CLI install detects existing source and wiring, then records install state in .payload-components/state.json.

Content model

The first three fields come from the shared faqFields base; items and links are specific to this variant.

Prop

Type

Each item in items carries:

Prop

Type

Usage

Add the block to a page. In the Payload admin, open (or create) a Page and add the FaqAccordion block to its layout.
Fill the content. Complete the fields from the content model above — the component ships sample content you can start from.
Publish. Save and publish the page; the block renders through RenderBlocks on the frontend, fully typed — no extra wiring.

Requirements

Target
payload-website-starter, payload-blocks-app
Payload
v3 (3.25 or newer) / v4 (experimental)
Next.js
15 / 16 with v316 (16.4 or newer) with v4
shadcn UI
accordion, badge

Payload v4 support is experimental: it needs Next.js 16 (16.4 or newer) and Node.js 24.22.1 or newer. Payload v3 (3.25 or newer) stays fully supported.

Your project must already expose components.json, src/payload.config.ts — the surfaces patched by payload-components add. The CLI verifies this against the support matrix before touching anything.

In this family