A Payload CMS Boilerplate with pre-built Shadcn Blocks

Rapidly build dynamic pages in Payload CMS like never before. We've converted a selection of our blocks into Payload ready components with full config and field data. Creating sections in a Headless CMS has never been easier.

Live demoDocumentation
placeholder

A Payload CMS + Next.js boilerplate

Get the entire Payload CMS + Nextjs + Shadcnblocks boilerplate, ready to deploy and start building

Dynamic page builder

Create dynamic pages with a flexible, block-based system. Add, remove, and rearrange components to build landing pages from the CMS.

Auth, Database, Forms +

Enjoy built-in authentication, mongo or sql database support, forms, collections, multilingual, media management and automated deployments.

Premium Payblocks Components

High-quality, fully dynamic blocks with rich text, media components, and CMS integration.

24+ Premium Block Types

Payblocks offers a comprehensive collection of high-quality, fully dynamic components. Each block supports rich text editing, media integration, and seamless CMS connectivity.

FeatureBlock
Archive
FormBlock
CtaBlock
LogosBlock
AboutBlock
ContactBlock
Gallery
TestimonialBlock
FaqBlock
StatBlock
SplitViewBlock

+ 12 more premium blocks

placeholder
src
Blocks
Feature
feature1.tsx
config.ts
heros
feature1.tsx
import { Button } from '@/components/ui/button'    import RichText from '@/components/RichText'    import { FeatureBlock } from '@/payload-types'    import { Media } from '@/components/Media'    import { CMSLink } from '@/components/Link'    import { Icon } from '@/components/Icon'    import { PublicContextProps } from '@/utilities/publicContextProps'        const Feature1: React.FC<FeatureBlock & { publicContext: PublicContextProps }> = ({      richText,      image,      links,      icon,      publicContext,    }) => {      return (        <section className="py-32">          <div className="container">            <div className="grid items-center gap-8 lg:grid-cols-2">              <div className="flex flex-col items-center text-center lg:items-start lg:text-left">                <span className="bg-accent flex size-12 items-center justify-center rounded-full">                  {icon && <Icon icon={icon} className="size-6" />}                </span>                {richText && (                  <RichText                    publicContext={publicContext}                    withWrapper={false}                    overrideStyle={{                      h1: 'my-6 text-pretty text-3xl font-bold lg:text-4xl',                      p: 'mb-8 max-w-xl text-muted-foreground lg:text-lg',                    }}                    content={richText}                  />                )}                    <div className="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">                  {Array.isArray(links) && links.length > 0 && (                    <div className="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">                      {links.map(({ link }, i) => {                        return (                          <CMSLink                            publicContext={publicContext}                            className="w-full sm:w-auto"                            key={i}                            {...link}                            size={'lg'}                          />                        )                      })}                    </div>                  )}                </div>              </div>              {image && <Media resource={image} className="max-h-96 w-full rounded-md object-cover" />}            </div>          </div>        </section>      )    }        export default Feature1

A dynamic page builder for Payload CMS

Dynamic page builder

We've built a Payload CMS Boilerplate that makes it easy to create dynamic pages with a flexible, block-based system. In the content you can seamlessly add, remove, and rearrange components like Feature, CTA, Media, and more to craft unique marketing and landing page designs—without any complex setup.

Dynamic page builder

Next.js dynamic rendering

Next.js is pre-configured to fetch data for new pages and iterate and render different blocks that are added on the CMS side.

Next.js dynamic rendering

Fullstack Boilerplate

A complete fullstack boilerplate with user authentication, database integration, form handling, content collections, media management, and automated deployments. Built with Next.js and Payload CMS for a production-ready foundation.

Fullstack Boilerplate

Dozens of blocks made CMS ready

Dozens of Shadcn blocks have been upgraded to full Payload CMS ready blocks. Each block now contains expanded props and a payload config that maps to its field types in Payload.

Dozens of blocks made CMS ready

Enterprise-Ready CMS Built for Developers

Payblocks combines the power of Next.js, Payload CMS, and shadcn/ui to deliver a feature-rich, type-safe, and highly customizable content management system.

View Documentation

Clean Code Structure

Well-organized blocks in dedicated folders following clear separation of concerns. Maintains global blocks, utilities, and Next.js standards for optimal maintainability.

Dynamic Catch All Routes

Implements optional catch-all routes in Next.js for seamless page rendering and dynamic language routing. Add new pages directly from the CMS without additional Next.js configuration.

Form Builder

Complete form solution with field validation, layout controls, and Cloudflare Turnstile protection. Includes CMS storage and email forwarding capabilities.

Multilingual Support

Comprehensive i18n support across CMS content and admin dashboard. Features automatic language-based routing and intelligent URL handling for global accessibility.

Automatic Caching

Intelligent Next.js page caching with automatic revalidation on content updates. Built-in hooks trigger cache updates, ensuring optimal performance and content freshness.

Live Preview

Real-time preview with split-view editing and automatic draft saving. Includes drag-and-drop block arrangement and instant full-page preview capabilities.

Easy Deployment

Streamlined deployment process with native Next.js integration. Quick setup with MongoDB Atlas and Vercel, allowing you to launch your project in minutes.

Dynamic Open Graph Images

Automatic generation of social media preview images with customizable backgrounds, fonts, and layouts. Includes per-page override options and automatic header integration.

Redirect Management

Built-in redirection system for preserving SEO rankings during migrations. Features cached redirects with instant updates and smart internal page targeting.

Role-Based Access

Comprehensive access control system with predefined admin and editor roles. Includes Google OAuth integration for secure authentication and user management.

Continuous Updates

Regular feature additions and improvements with preserved upgradeability. Includes direct repository access and guidelines for custom block implementation.

Theme Configuration

Advanced theme customization through an intuitive admin interface. Features real-time color preview tools for immediate visual feedback.

Database Flexibility

Full support for both MongoDB and PostgreSQL databases. Includes comprehensive data management tools for reliable operation.

Backup and Recovery

Integrated backup solution with manual and automatic options. Features direct blob storage integration and easy system restoration through the admin interface.

And Many More...

Dozens of other features are waiting for you to discover them.

Payload CMS BoilerplatePayblocks

A Payload CMS boilerplate saving you hundreds of hours in development.

$379
Professional Payload CMS, Next.js Boilerplate Source code
24+ block Typeslearn more
70+ blocks converted to payload components with editable fields.
Unlimited projects
Lifetime access
Once off payment
Unlimited Websites

Frequently Asked Questions