Faq Grouped
An FAQ split into titled, icon-tagged category groups of accordions.
Installation
npx payload-components add faq-groupedWhat it installs
Copies 4 source files into your project:
src/blocks/shared/faqFields.tssharedsrc/blocks/shared/faqIcons.tssrc/blocks/FaqGrouped/config.tssrc/blocks/FaqGrouped/Component.tsx
…and makes 4 edits to wire the block into your project:
| Registers the block | src/collections/Pages/index.ts |
| Maps the renderer | src/blocks/RenderBlocks.tsx |
| Regenerates types | src/payload-types.ts |
| Regenerates the admin import map | src/app/(payload)/admin/importMap.js |
src/collections/Pages/index.tssrc/blocks/RenderBlocks.tsxsrc/payload-types.tssrc/app/(payload)/admin/importMap.jsfaqFields.ts is the shared field core for this family — every variant composes it. Editing it updates each installed block at once, and re-running an install never overwrites a copy you have changed.Re-running the install converges: it detects existing wiring, skips it, and records install state in .payload-components/state.json.
Content model
The first three fields come from the shared faqFields base; groups is specific to this
variant. Each group's icon is a select over the faqIcons allowlist — Payload stores the
name and the frontend looks up the matching lucide mark at render.
Prop
Type
Each group in groups carries:
Prop
Type
Usage
FaqGrouped block to its layout.RenderBlocks on the frontend, fully typed — no extra wiring.Requirements
- Target
- payload-website-starter
- Payload
- v3
- Next.js
- 15 / 16
- shadcn UI
- accordion, badge
Your project must already expose components.json, src/payload.config.ts, src/blocks/RenderBlocks.tsx, src/collections/Pages/index.ts — the surfaces payload-components add patches. The CLI verifies this against the support matrix before touching anything.
In this family
faq-splitfaq-accordionfaq-groupedcurrentfaq-cardfaq-iconsfaq-grid