> ## 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 Plugin: Features and Admin Panel Overview

> AtomicKit adds a dedicated WordPress admin panel with a class creator, variables manager, import/export tools, and snapshot history for Elementor.

AtomicKit extends the WordPress admin with a dedicated panel for managing your Elementor design system. From the AtomicKit admin section you can create and manage global CSS variables, build and organize utility classes, import design systems from external CSS, export your setup, and roll back to any saved snapshot. Every feature works directly with Elementor's native global class and variable systems — no custom post types, no extra databases.

## Accessing AtomicKit

Navigate to **Elementor → AtomicKit** in your WordPress admin sidebar to open the plugin panel. From there, the top navigation gives you instant access to every feature area.

<Note>
  AtomicKit requires Elementor v4 with the **Atomic Elements** and **Global CSS Variables** experiments enabled. If either experiment is off, the [Dashboard](/plugin/dashboard) health check will flag it with a direct link to fix it.
</Note>

## Feature Pages

<CardGroup cols={2}>
  <Card title="Dashboard" icon="gauge-high" href="/plugin/dashboard">
    Monitor active class counts, variable counts, and tracked imports. Run automated health diagnostics to confirm your Elementor v4 experiments are active.
  </Card>

  <Card title="Variables Manager" icon="palette" href="/plugin/variables-manager">
    Create, edit, and delete global CSS design tokens for colors, fonts, sizes, and custom values. Changes propagate instantly across every element using those tokens.
  </Card>

  <Card title="Class Creator" icon="wand-magic-sparkles" href="/plugin/class-creator">
    Visually build custom Elementor global classes with property selectors, breakpoint scopes, design token references, and a live CSS preview before saving.
  </Card>

  <Card title="Import" icon="file-import" href="/plugin/import">
    Bring CSS utility classes into Elementor by pasting raw CSS, fetching from a public URL, or uploading a .css file — with a full diff preview before committing.
  </Card>

  <Card title="Export" icon="file-export" href="/plugin/export">
    Download your Elementor design system as a .css stylesheet or .json schema. Choose to export all classes, AtomicKit-tracked classes only, or a filtered selection.
  </Card>

  <Card title="Snapshot History" icon="clock-rotate-left" href="/plugin/snapshot-history">
    Save named checkpoints of your Elementor class state and restore any previous snapshot. AtomicKit auto-saves before every rollback for an extra layer of safety.
  </Card>
</CardGroup>

## Feature Quick Reference

The table below summarises what each section of the plugin does at a glance.

| Feature           | What it does                                                        |
| ----------------- | ------------------------------------------------------------------- |
| Dashboard         | Monitors class counts, variable counts, and runs health diagnostics |
| Variables Manager | Create, edit, and delete CSS design tokens                          |
| Class Creator     | Visually build custom utility classes with breakpoint scopes        |
| Import Center     | Bring in CSS from paste, URL, or file upload                        |
| Export Center     | Download your design system as `.css` or `.json`                    |
| Snapshot History  | Save and restore Elementor class states                             |