BetaUnder active development — content may be incomplete or change without notice.

Introduction

Blok0 is a collection of production-ready layout blocks for Payload CMS. Copy, customize, and ship faster with a consistent design system. No dependencies. Fully owned code.

Blok0 is a free, open library of copy-paste layout blocks built for Payload CMS. No installs. No packages. Just real code you take, own, and ship.

Browse blocks, preview them, and drop the code straight into your project.

Right now, Blok0 ships 25 blocks across 14 categories: Heroes, Features, Content, CTAs, FAQs, Testimonials, Logos, Pricing, Stats, Team, Newsletters, Contacts, Headers, and Footers.

These are the exact sections you keep rebuilding anyway.

Why Blok0?

Let’s be honest — most teams waste time rebuilding the same layouts over and over.

You:

  • Recreate a hero
  • Hack together a features section
  • Copy a CTA from an old repo
  • Spend hours fixing spacing that still feels off

The result? A page that works, but looks like it was stitched together from five different projects.

Blok0 fixes that.

What you actually get:

  • One source of truth
    Stop digging through old codebases. Everything is in one place.

  • Up-to-date stack
    Built for Payload v3 + Next.js 15. No legacy garbage.

  • Copy → paste → done
    Each block includes both config and component. They work immediately.

  • Design consistency by default
    Every block follows the same fluid system. Stack them however you want — they’ll look intentional, not accidental.

  • Editor control built in
    Non-devs can tweak spacing, colors, alignment directly in Payload. No hand-holding required.

  • You own everything
    No dependency. No lock-in. No updates breaking your project.

How It Works

Every block is just a folder with two files:

FilePurpose
config.tsDefines fields in the Payload admin panel
component.tsxRenders the block in your frontend

That’s it.

Copy both files, register the block, and move on with your life.

The Foundation

Before using blocks, you install a small shared foundation.

This handles:

  • spacing
  • typography
  • layout consistency

Do it once. After that, every block just works.

No extra setup. No surprises.

Compatibility

Blok0 is built around a modern, opinionated stack:

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

Some blocks include improved versions of Payload’s default link fields — mainly to fix missing features like localization and required states.

Prerequisites

If you don’t know these, you’re going to struggle:

  • Payload CMS v3 (blocks, collections, fields)
  • React
  • Tailwind CSS
  • shadcn/ui

Some components rely on helpers like Media and CMSLink from the Payload website template.

If you're using Payload + Next.js properly, you already have them.

If not — fix your setup first.

What’s Included

CategoryBlocks
HeroesHero 1, Hero 2, Hero 3
FeaturesFeature 1, Feature 2
ContentContent 1, Content 2
CTAsCTA 1, CTA 2
FAQsFAQ 1, FAQ 2
TestimonialsTestimonial 1, 2, 3, 4
LogosLogo 1, 2, 3
PricingPricing 1
StatsStats 1
TeamTeam 1
NewslettersNewsletter 1
ContactsContact 1
HeadersHeader 1
FootersFooter 1

Next Steps

  • Installation & Setup — get the foundation in place
  • Browse Blocks — pick what you need and move fast
  • Fluid Design System — understand how spacing and scaling work (optional)
  • Naming Conventions — keep your codebase clean

Final Reality Check

Blok0 doesn’t make you a better designer.

It removes the excuses.

If your pages still look bad after this, it’s not the blocks — it’s your decisions.