How do I add a new block?

Create a folder in src/blocks/YourBlock/ with config.ts (the Payload field schema) and Component.tsx (the React component). Register the block in src/payload.config.ts and run pnpm generate:types. That's it — the block appears in the admin panel immediately.

Can I install additional shadcnblocks designs?

Yes. Any shadcnblocks component can be added as a Payload block. Install the component, wrap it in config.ts + Component.tsx, and register it. Hundreds of additional premium designs are available at shadcnblocks.com.

How does multilingual content work?

Add a locale to src/localization.config.ts. Every text field in every block automatically supports per-locale values. Editors switch locales in the admin panel — no plugin required.

What is included in the backup plugin?

The MongoDB backup plugin creates scheduled and manual backups to Vercel Blob storage. Configure how many backups to retain and restore any version with one click from the admin panel.

How does role-based access work?

Three roles ship out of the box: Admin (full access), Editor (content only), and Viewer (read-only). Roles are enforced at the collection and field level. Add custom roles or modify the existing ones in src/collections/Roles/.

Can I use Payblocks without the agent API?

Absolutely. The agent API is an optional localhost-only endpoint. If you do not use AI workflows it simply sits unused — it does not affect the frontend, admin panel, or performance.

payblocks

Powerful Features for Modern Web Development

Helping developers to build websites in minutes instead of days.

Features Buy Now

Every feature you need to build and operate a production website

Payblocks ships a complete, opinionated layer on top of Payload CMS and Next.js — blocks, access control, i18n, backups, breadcrumbs, redirects, and an agent API. Ready the same day you clone.

Get Access on shadcnblocks View Live Demo

Block library

100+ production-ready UI blocks — including every shadcnblocks design

Choose from the built-in Payblocks block library or install any shadcnblocks design in seconds. Every block ships with multiple layout variants, typed CMS fields, and live preview support.

Built-in Blocks

Feature — 100+ variants for capability showcases and comparisons
CTA — 15+ conversion section designs
FAQ — accordion, sidebar, and inline layouts

shadcnblocks Integration

Any shadcnblocks component works as a Payload block with zero extra config
Add the component, create config.ts + Component.tsx, register in payload.config.ts
Hundreds of additional premium designs available from shadcnblocks.com

A CMS that marketers and developers enjoy equally

Full layout builder with drag-and-drop blocks. Draft and publish workflow. Live preview in the admin panel. Per-page SEO fields. Auto-generated OG images.

Layout Builder

Drag blocks onto pages in any order. Configure per-block fields inline. Pure Payload fields — no abstraction over the API.

Live Preview & Draft Workflow

See changes before publishing. Every page has a draft and published state — review with clients before going live.

SEO per Page

Title, description, and Open Graph image per page. Auto-generated OG images via the built-in /next/og endpoint. No plugin required.

Internationalization

Native Payload i18n. Add a locale in one config line. Every text field in every block supports per-locale values.

Breadcrumbs & Nested Pages

Automatic breadcrumb generation for nested page hierarchies. Every page gets a breadcrumbs field populated by the nested-docs plugin.

Dynamic Redirects

Manage 301/302 redirects from the admin panel. The redirects collection handles slug changes without touching code.

Role-based access for teams and clients

Three default roles — Admin, Editor, Viewer — configurable per collection. Custom roles, field-level restrictions, and Google OAuth login included.

Admin

Full read/write over all collections and globals. Access to users, roles, and system settings.

Editor

Create and edit content. No access to users, roles, or technical settings. Ideal for client handoff.

Viewer

Read-only access for client review. See drafts without edit permissions.

One-click Google login for the admin panel. Restrict access by allowed email domain. No password management required.

Infrastructure that does not get in your way

MongoDB backups, Vercel-ready deployment, Blob media storage, Resend email, dynamic icon rendering, and Payload Workflows — all wired up with zero extra configuration.

MongoDB Backups

Scheduled cron and manual backups to Vercel Blob. One-click restore. Configurable retention count.

Vercel Deployment

vercel.json included. Deploy in one command. Custom domains work out of the box.

Dynamic Icons

100+ Lucide icons available as server-rendered SVGs in any block. Zero client bundle cost — icons load per-file, never as a barrel import.

Payload Workflows

Long-running tasks like batch publishing, import pipelines, and scheduled jobs run via Payload's built-in workflow system — no external queue needed.

Media Storage

Vercel Blob integration for uploads. No S3 config for standard deployments.

Email via Resend

Transactional emails for auth and forms. Configured with your FROM address. Zero SMTP setup.

A codebase you can maintain and explain to a new teammate

TypeScript throughout. Prettier + ESLint with the official Payload config. E2E tests with Playwright. Clear block pattern — every block is config.ts + Component.tsx.

See the Agent Workflows guide

TypeScript

Strict null checks throughout. pnpm generate:types keeps types in sync with your Payload schema automatically.

E2E Test Suite

Playwright tests covering admin, API, icon rendering, and page rendering. CI on every push via GitHub Actions.

Clear Block Pattern

Every block is config.ts + Component.tsx in src/blocks/BlockName/. Self-contained, findable, extendable without side effects.

Block Metadata via API

Every block schema is introspectable at runtime via the admin API schema op. Agents discover available fields and valid enum values before writing.

Agent-Ready Admin API

Localhost-only REST endpoint with full CRUD + schema introspection over all collections. Your agents always know the data model.

Common questions about Payblocks features

One clone. Full stack.

Everything included. Nothing to configure before you can start.

One clone. Full stack. Ship the same day.