Add to an existing project
Drop one or more @pro-laico/* plugins into a Payload + Next.js app you already have.
Add Atomic Payload's plugins to a Payload + Next.js project you already have, no scaffolding required.
Steps
Install the plugin
Every Atomic Payload plugin is a standalone @pro-laico/* package you install with your package manager. Add the one you want, here @pro-laico/styles:
pnpm add @pro-laico/stylesnpm install @pro-laico/stylesyarn add @pro-laico/stylesRepeat for any other plugins you need.
Register it in your Payload config
Each plugin follows the same standard package shape: a (opts) => (config) => config factory exported as both the default and a named export. Add the factory to your config's plugins array:
import { buildConfig } from 'payload'
import { stylesPlugin } from '@pro-laico/styles'
export default buildConfig({
plugins: [stylesPlugin()],
})The barrel each plugin exports is safe to import from payload.config.ts, because client-only code lives behind subpaths, so it never leaks into your config bundle. Raw collections, hooks, fields, and components are also available as named imports for advanced consumers.
Regenerate types
Atomic Payload's packages type themselves against the kernel's single PayloadAugment interface via cross-package type augmentation. Each package ships its block shapes through a schema subpath; your project fills the interface in once with a generated augmentation file. Regenerate it after adding a plugin:
pnpm generate:typesThis regenerates Payload's payload-types.ts and appends payload-types.augment.d.ts, so every package's schema stubs resolve to your project's concrete shapes.
Each plugin's own page documents its required and optional peer dependencies plus its full option set. Check the plugin page before wiring it up, since some plugins need extra setup (for example, mounting a provider at your app root) beyond registering the factory.