[!Important] While this project utilizes Payload CMS, Atomic Payload is not affiliated with Payload CMS in any capacity.

Atomic Payload

Originally built as a website builder utilizing recursive atomic blocks, Atomic Payload is now a collection of plugins that together create a powerful website builder in Payload CMS. With the pluginifcation of the project, several aspects can now be used as standalone plugins.

The atomic-payload template is the fastest way to see everything at once — and a cool demo of what the plugins can do composed. The resulting websites built with Atomic Payload have excellent performance.

Getting Started

• Start With A Full Template Or Example Repo — see the Quick Start guide.
• Add a Plugin — see the Existing Project guide.

Features

@pro-laico/styles

Everything CSS, authored straight in the Payload admin.

Tailwind Styles

Write Tailwind directly in the Payload admin dashboard, so you can have custom styled blocks wherever you need them.

UnoCSS Shortcuts

UnoCSS powers our style generation, so we can leverage the built in Shortcut functionality to group our styles for reuse across your website.

Design Tokens

Create reusable values related to your website design. Including colors, sizings, screen sizes, animations and more!

Design Sets

Design Sets are the equivalent of a complete Tailwind config file and can completely alter the appearance of your website. Only one design set can be active at a time, meaning you can build new concept designs and easily swap back and forth to see which you prefer.

@pro-laico/atomic

Recursive content blocks, interactivity, and forms.

Recursive Structure + Copy Paste Duplicate

Build entire custom components using Atomic Child Blocks. Combined with Payload's CPD functionality, you can reuse components with ease.

[!NOTE] Once Payload CMS implements Sanity Style CPD, you will be able to reuse components across projects.

Actions

Actions create interactivity and reactivity for your application for all atomic blocks. Including functionality such as opening/closing dialogs/popovers, toggling dark mode, converting stateful values to data attributes, or just submitting a form.

[!NOTE] Actions utilize a block structure so you can extend them by adding a new action block.

Custom Forms With SVR

All of the above functionality meshes with the additional Sanitation, Validation and Rate Limiting for forms and their inputs. Allowing you to build fully customizable forms.

[!NOTE] SVR's utilize a block structure so you can extend them by adding a new SVR block.

Packages

Atomic Payload is split into three kinds of packages, all published under @pro-laico/*. Full options and setup for each live in the plugin docs.

Foundation

Required by every other package — the shared kernel everything builds on.

Standalones

Self-contained plugins you can drop into any Payload + Next.js project on their own (alongside @pro-laico/core).

Tools

Building blocks consumed by the other packages and by the full demo template. They're split into their own packages to keep maintenance and updates manageable — you can use them directly, but most projects pull them in transitively rather than installing them alone.

Documentation

Full documentation lives at atomicpayload.com.

Contributing

Contributions are welcome! See MONOREPO.md for repo structure, local development, publishing, and how to add a plugin.