Overview
Summary generated from the READMEAdds designSet and shortcutSet collections to Payload, along with token fields and admin row labels. A runtime UnoCSS processor turns the active design set into CSS for both the frontend and the Payload admin. It is part of the Atomic Payload suite and builds on its core, zap and site packages. Requires Payload 3 or later.
Features
- designSet and shortcutSet collections for managing styles in the admin
- Tailwind-style class authoring inside the Payload dashboard
- UnoCSS shortcuts for grouping and reusing styles
- Design tokens for colors, sizes, screen sizes and animations
- Only one design set active at a time, so concept designs can be swapped
- CSS pipeline with a processor, hook and processDesignSet function
Use cases
- Switch between complete site designs by activating a different design set
- Define reusable color, sizing and animation tokens editable by non-developers
- Style custom blocks with utility classes written directly in the admin
From the author
Atomic Payload styles: designSet + shortcutSet collections, token fields, CSS preflight pipeline, UnoCSS processor and processDesignSet pipeline. The single package responsible for all CSS handling (frontend + Payload admin/runtime).
Installation
npm i @pro-laico/styles37
Stars
0
Forks
0
Open Issues
2 months ago
Last Updated
1
Weekly Downloads
v0.5.0
npm Version
239.0 KB
Unpacked Size
2
Dependencies
Trends (last 90 days)
Trends appear after 7 days of data. Collecting since Oct 22 — 2 daily snapshots so far.
Shared by 10 plugins in pro-laico/atomic-payload.
Trends appear after 7 days of data. Collecting since Oct 22 — 2 daily snapshots so far.
Each point is npm's rolling 7-day download count.
Health Score
Composite score based on GitHub activity, stars, npm downloads, publish recency, dependency count, and package size.
Badge for your README
[](https://payloaddirectory.dev/plugins/1128550352-styles)<a href="https://payloaddirectory.dev/plugins/1128550352-styles"><img src="https://payloaddirectory.dev/badge/1128550352-styles.svg" alt="Payload Directory"></a>README
Atomic Payload Styles Plugin
The single home for all CSS handling in Atomic Payload: the designSet + shortcutSet collections, token fields and admin row-labels, and the runtime UnoCSS processor that turns the active design set into CSS for both the frontend and Payload's admin. Part of Atomic Payload.
Features
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.
Atomic Payload dependencies
@pro-laico/core— shared kernel the plugin builds on.@pro-laico/zap— the schema registry that wires the design-set / shortcut-set type stubs.@pro-laico/site— type-only relationship for the fields/slugs the processor reads.
Exports
| Import | What's there |
|---|---|
@pro-laico/styles | stylesPlugin (default + named) and its options types, the ClassNameField field, and the CSS pipeline (createCssProcessor, createCssHook, processDesignSet) with their types. |
@pro-laico/styles/schema | Schema stubs (DesignSet, CollectionThatUsesCSSProcessorSlug, CollectionWithStoredAtomicClassesSlug) for the PayloadAugment registry. |
@pro-laico/styles/fields/className | The ClassNameField factory. |
@pro-laico/styles/ui/rowLabels/shortcut | Admin row-label React component for shortcuts. |
@pro-laico/styles/ui/rowLabels/color | Admin row-label React component for colors. |
@pro-laico/styles/ui/rowLabels/animation | Admin row-label React component for animations. |
@pro-laico/styles/ui/rowLabels/designToken | Admin row-label React component for design tokens. |
Topics
Similar plugins
payload admin theme
shadcn-style admin theme for Payload configured from a global in the admin panel without rebuilds
63100/wk1v3
theme management
Theme presets, live preview and accessibility audit for restyling a Next.js site from the Payload admin
7339/wk9v3
payload theme
shadcn-style admin theme with dashboard, command palette, grouped sidebar and live customizer
69909/wk26v3
compass payload plugin
Checks a site for brand drift against an ontology and a simulated Figma agent, with admin and on-site flags
250v3
shadcn ui
Shadcn UI components for the Payload admin panel, configurable per component
2414/wk20v2
payload plugin info tooltip
Show field help as an info icon tooltip next to the label instead of a description under the field
80365/wk6v3 v4