Layout Blocks

LayoutBlocks is a free, open library of copy-paste layout blocks for Payload CMS. Browse blocks, see live previews, and copy the code directly into your project.

This is not an npm package you install. It is a collection of ready-made Payload block configs and React components that you own and can modify freely.

The library currently includes 25 blocks across 14 categories: Heroes, Features, Content, CTAs, FAQs, Testimonials, Logos, Pricing, Stats, Team, Newsletters, Contacts, Headers, and Footers — covering the sections you reach for most often when building marketing pages and landing pages.

Why LayoutBlocks?

Building pages in Payload means building blocks — a hero, a features section, a CTA, a pricing table. Most teams build these from scratch for every project, or dig through old codebases looking for something reusable. The result is blocks that were built at different times, with different spacing, different patterns, and a lot of hours spent on layout work that does not differentiate your project.

Then there is the consistency problem. You stack five blocks on a page and the spacing between them never quite feels right. Each block was built independently, so the vertical rhythm is uneven and the overall page feels stitched together rather than designed as a whole.

LayoutBlocks gives you a head start:

• One place to find blocks — browse, preview, and copy instead of hunting through old projects
• Always up to date — built for the latest Payload v3 + Next.js 15
• Copy, paste, done — every block comes with a Payload config and a React component that work together out of the box
• Blocks that look right together — every block shares a fluid design system that makes spacing and typography scale smoothly across all screen sizes. Stack any combination of blocks on a page and they look cohesive, without manual tweaking
• Built-in editor controls — content editors can adjust spacing, background colors, and text alignment directly in the Payload admin panel, without touching code
• You own the code — no dependency to manage, no version lock-in

How It Works

Each block is a self-contained folder with two files:

Browse a block on this site, copy both files into your project, register the block with Payload, and you are done.

The Foundation

Before adding your first block, you copy a small set of shared files into your project. These files provide the design system that handles spacing, typography, and layout for all blocks. This is a one-time step — once the foundation is in place, every block you add works immediately without extra configuration.

Installation & Setup walks through this process.

Compatibility

Blocks are designed to work with the Payload website template and its conventions. The stack:

• Payload CMS v3 + Next.js 15 (App Router)
• Tailwind CSS
• shadcn/ui
• Lucide icons
• TypeScript

Some blocks use improved versions of the standard Payload link and linkGroup fields — adding localization support and a required option that the originals lack.

Prerequisites

LayoutBlocks assumes working familiarity with:

• Payload CMS v3 — block configs, collections, fields
• React — components use standard React patterns
• Tailwind CSS — all styling uses utility classes
• shadcn/ui — some blocks use shadcn components (Badge, Accordion, etc.)

Some components use Next.js Image or Link via the Payload website template's Media and CMSLink helpers. If you are using Payload with Next.js (which is the standard setup), these are already in place.

New to Payload? Start with the official Payload docs.

What's Included

Next Steps

• Installation & Setup — set up the foundation and add your first block
• Browse all blocks — jump straight into the library
• Fluid Design System — understand the responsive design system (optional deep dive)
• Naming Conventions — file and code naming patterns