> ## Documentation Index
> Fetch the complete documentation index at: https://atomickit.copyelement.com/llms.txt
> Use this file to discover all available pages before exploring further.

# AtomicKit Dashboard: Live Metrics and Health Checks

> The AtomicKit dashboard shows live counts of global classes, CSS variables, and tracked imports, plus health diagnostics for Elementor v4 experiments.

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.

<CardGroup cols={3}>
  <Card title="Active Global Classes" icon="layer-group">
    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.
  </Card>

  <Card title="CSS Design Variables" icon="sliders">
    The number of global CSS variables currently managed through the Variables Manager, covering colors, fonts, sizes, and custom tokens.
  </Card>

  <Card title="Tracked Imports" icon="file-import">
    The number of CSS imports AtomicKit has processed through the Import Center and is actively tracking for diff comparisons on future re-imports.
  </Card>
</CardGroup>

<Note>
  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.
</Note>

## 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.

| Check                | What it confirms                                  |
| -------------------- | ------------------------------------------------- |
| Atomic Elements      | Elementor's native atomic class engine is enabled |
| Global CSS Variables | Elementor'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:

<Steps>
  <Step title="Open Elementor Experiments">
    In your WordPress admin, go to **Elementor → Settings → Experiments**.
  </Step>

  <Step title="Locate the experiment">
    Search for **Atomic Elements** or **Global CSS Variables** in the experiments list.
  </Step>

  <Step title="Enable the experiment">
    Set the toggle to **Active** and click **Save Changes**.
  </Step>

  <Step title="Return to the Dashboard">
    Navigate back to **Elementor → AtomicKit**. The health check should now show green.
  </Step>
</Steps>

<Warning>
  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.
</Warning>

## Workflow Actions

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

<CardGroup cols={2}>
  <Card title="Open Class Manager" icon="layer-group" href="/plugin/class-creator">
    Browse, reorder, rename, duplicate, or delete your existing global classes.
  </Card>

  <Card title="Create Variables" icon="palette" href="/plugin/variables-manager">
    Open the Variables Manager to add or edit design tokens.
  </Card>

  <Card title="Import a Library Preset" icon="file-import" href="/plugin/import">
    Jump straight to the Import Center to load a CSS framework or preset.
  </Card>

  <Card title="Build a New Class" icon="wand-magic-sparkles" href="/plugin/class-creator">
    Go directly to the Class Creator tab to define a new utility class.
  </Card>
</CardGroup>

## Best Practices

<Accordion title="Keep your class count below 1,000">
  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.
</Accordion>

<Accordion title="Run the health check after plugin or Elementor updates">
  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.
</Accordion>

<Accordion title="Use the dashboard as a daily starting point">
  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.
</Accordion>