Skip to main content
The AtomicKit dashboard is your design system control center. It shows live metrics for your Elementor global classes and CSS variables, and automatically checks that the required Elementor v4 experiments are enabled. Open it any time you want a quick read on the state of your design system or to jump straight into a specific workflow.

​
Live Metrics

The top of the dashboard displays three live counters that update whenever you make changes through AtomicKit.

Active Global Classes

The current number of Elementor global classes registered on your site. Elementor enforces a hard limit of 1,000 classes — the counter turns amber as you approach that threshold.

CSS Design Variables

The number of global CSS variables currently managed through the Variables Manager, covering colors, fonts, sizes, and custom tokens.

Tracked Imports

The number of CSS imports AtomicKit has processed through the Import Center and is actively tracking for diff comparisons on future re-imports.
Elementor’s global class limit is 1,000 classes. AtomicKit surfaces this counter prominently so you can plan ahead. If you are nearing the limit, use the Export Center to archive unused classes and delete them to free up capacity.

​
Health Diagnostics

AtomicKit runs an automated environment check every time you open the dashboard. It verifies that the two Elementor v4 experiments required for the plugin to function are both active.
CheckWhat it confirms
Atomic ElementsElementor’s native atomic class engine is enabled
Global CSS VariablesElementor’s native CSS variable system is enabled
Each check displays a green Active badge when passing or a red Inactive badge when failing.

​
Fixing a Failed Check

If either experiment shows Inactive, follow these steps:
1

Open Elementor Experiments

In your WordPress admin, go to Elementor → Settings → Experiments.
2

Locate the experiment

Search for Atomic Elements or Global CSS Variables in the experiments list.
3

Enable the experiment

Set the toggle to Active and click Save Changes.
4

Return to the Dashboard

Navigate back to Elementor → AtomicKit. The health check should now show green.
Both the Atomic Elements and Global CSS Variables experiments must be enabled for AtomicKit to read and write to Elementor. If either is off, class and variable operations will not persist.

​
Workflow Actions

The dashboard provides quick-entry buttons so you can jump directly into any workflow without navigating through the sidebar.

Open Class Manager

Browse, reorder, rename, duplicate, or delete your existing global classes.

Create Variables

Open the Variables Manager to add or edit design tokens.

Import a Library Preset

Jump straight to the Import Center to load a CSS framework or preset.

Build a New Class

Go directly to the Class Creator tab to define a new utility class.

​
Best Practices

Elementor’s 1,000-class limit is a hard ceiling. Plan your utility class architecture to stay well below it. Use AtomicKit’s Export Center to archive snapshots of class sets you no longer need actively, then delete those classes to reclaim capacity.
Major Elementor updates occasionally reset experiment states. After any update to Elementor or AtomicKit, open the dashboard and confirm both health checks are still green before continuing design work.
Glancing at the live metrics before a design session takes seconds and can save you from hitting limits or working with stale variable counts mid-workflow.