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 22 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?

If you have built more than one Payload project, you know the drill: dig through old repos for that hero block you made six months ago, copy-paste it into your new project, fix the outdated imports, tweak the styling, adapt the fields. Repeat for features, FAQs, CTAs... Every project starts with the same tedious block assembly.

LayoutBlocks solves this:

• One place to find blocks — no more treasure hunts through old repos
• 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
• You own the code — no dependency to manage, no version lock-in

How It Works

Each block is a self-contained folder with everything you need:

Browse a block, copy the config and component into your project, register them, and you are done.

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 opinionated improvements on the standard Payload link and linkGroup fields — adding localization support and a required option that the originals lack. These are fully documented in the Fields section.

Prerequisites

We assume working familiarity with:

• Payload CMS v3 — block configs, collections, fields
• React — components use standard React patterns
• Tailwind CSS — all styling is done with 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), this is already in place.

New to Payload? Start with the official Payload docs.

What's Included

Next Steps

• Installation & Setup — How to add blocks to your project
• Naming Conventions — File and code naming patterns
• Browse all blocks — Jump straight into the library