A WordPress plugin that supercharges Elementor V4 with a complete atomic CSS utility framework and visual design system manager. Stop writing one-off CSS — start composing from a predictable, documented system.
AtomicKit gives Elementor V4 designers a complete atomic CSS utility framework and design system manager to build consistent, responsive websites faster. Instead of writing custom CSS for every spacing tweak, color choice, or layout adjustment, you apply descriptive class names directly to your Elementor elements — and AtomicKit handles the rest.
A comprehensive library of atomic classes covering spacing, typography, colors, flexbox layout, sizing, borders, effects, and filters. Every class is tokenized with CSS variables.
A visual WordPress admin panel where you create and manage global CSS variables (design tokens), build custom utility classes, import/export your design system, and roll back with snapshot history.
Two tightly integrated surfaces that work together to supercharge your Elementor V4 workflow.
A comprehensive library of atomic classes covering spacing, typography, colors, flexbox layout, sizing, borders, effects, and filters.
A visual WordPress admin panel to create and manage global CSS variables (design tokens), build custom utility classes, and maintain consistency across your site.
Add --on-m to any structural class and it only applies at that breakpoint. Responsive design without writing a single media query.
Every class is tokenized with CSS variables so your design stays consistent and easy to update globally with a single change.
Export your design system, import CSS from external sources, and roll back to previous states with built-in snapshot history.
Built specifically for Elementor V4 with Atomic Elements and Global CSS Variables experiments. Apply classes directly from the Elementor Advanced CSS classes panel.
Apply any of these utility classes directly in Elementor's Advanced CSS Classes panel.
| Category | Example Classes |
|---|---|
| Spacing | padding-4, margin-horizontal-8, gap-6 |
| Typography | text-2xl, font-bold, leading-relaxed, tracking-wide |
| Colors | text-primary, background-gray-light, border-error |
| Layout | flex, flex-col, justify-between, items-center |
| Sizing | width-full, height-screen, maximum-width-3xl |
| Borders | border-2, border-solid, rounded-xl |
| Effects | shadow-md, opacity-75, blur-sm |
| Filters | brightness-90, saturate-150, grayscale |
AtomicKit requires Elementor V4 with the Atomic Elements and Global CSS Variables experiments enabled.
Install AtomicKit from your WordPress admin panel and activate it.
Turn on Atomic Elements and Global CSS Variables in Elementor → Settings → Features.
Open any Elementor widget, go to Advanced → CSS Classes, and apply AtomicKit utility classes.
Use the visual Design System Manager in your WordPress admin to create and update global CSS variables.
Explore the full AtomicKit documentation and start building faster with atomic CSS utilities.