Introduction
Payload Components is a Fumadocs-first documentation and registry project for installable Payload CMS blocks.
Payload Components is an open-source, community-first registry and CLI that installs Payload CMS blocks into your Payload v3 + Next.js project — wired, not pasted.
What makes a component more than a copy-paste block
A plain shadcn add only copies files. payload-components add also does the Payload
wiring — it registers the block in your collection, maps the renderer, and
regenerates types plus the admin import map — then lands the whole thing as a
reviewable git diff.
The v2 app is intentionally not a Payload CMS site. It is a Fumadocs app with MDX documentation, static registry assets, and package tooling for validating installs into external Payload projects.
Install your first component
npx payload-components add hero-basicThe CLI verifies project shape, installs the registry item, applies Payload layout fragments, runs post-install tasks, and records install state.
Run this inside a supported Payload v3 + Next.js App Router project — not against this docs repo. Installation lists the requirements the installer checks before it touches anything.
Explore the docs
Architecture
Why the Fumadocs site and the Payload component tooling stay on separate runtimes.
Installation
Requirements, the add command, and exactly what the CLI does to a project.
Registry Contract
How the public registry, manifests, and wrapper CLI fit together.
Operations Runbook
Release checks, support triage, security intake, rollback, and feedback routing.
Contributing
The new-component checklist and how the catalog stays curated and verifiable.
Start with these
These five are a solid first install — a slice of the catalog, not the whole of it:
Hero Basic
Headline, description, one or two CTA links, and up to four proof badges. The golden component.
Feature Grid Basic
A text-first grid of repeatable feature cards with optional CTA wiring.
Feature Split
A two-column feature section: heading and CTA beside a stacked feature list.
Feature Bento
An asymmetric bento grid that leads with a featured cell.
Feature Steps
A numbered steps block for sequential, how-it-works flows.
Browse the full, always-current set rendered live in the Component Catalog.