Important
While this project utilizes Payload CMS, Atomic Payload is not affiliated with Payload CMS in any capacity.
A website builder that creates a hard separation between front-end development and the backend. Build your website directly in Payload CMS's dashboard, without ever having to touch real code.
This separation makes it easy to enforce best practices and achieve great performance out the box.
Write Tailwind directly in the Payload admin dashboard, so you can have custom styled blocks wherever you need them.
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.
UnoCSS powers our style generation, so we can leverage the built in Shortcut functionality to group our styles for reuse across your website.
Create reusable values related to your website design. Including colors, sizings, screen sizes, animations and more!
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.
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.
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.
- UnoCSS Tailwind Classes Processor
- Forms (Sanitation/Validation/Rate Limiting)
- Actions
- Design Sets & Tokens
- UnoCSS Shortcuts
- Image Upload & Display
- Mux Video Integration For Upload & Display
- Next.JS Local Fonts
- Custom SVG Icon Upload & Optimization
- Icon Sets
- Tracking (Vercel/Google/PostHog)
- Persistent Zustand Store
- Zod Schema Registry
- Zod Schema To Payload Types
- Convert To Plugin(s) (In Progress)
- Tailwind Styled Emails
- Version Routes
- Component Library
- UnoCSS Autocomplete
Create a new project (recommended):
pnpx @pro-laico/create-atomic-payload .Then follow the template setup guide for MongoDB, Vercel Blob, deployment, and optional integrations (Mux, Resend).
Contributing to the monorepo? See MONOREPO.md for structure, local development, publishing the CLI, and adding plugins.
Important
Our Discord is the best place to get quick answers to questions.
For documentation check out Atomic Payload.
We are also looking for contributors!