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

# Quickstart: Install AtomicKit and Apply Utility Classes

> Install AtomicKit, enable required Elementor experiments, and apply your first utility classes to an Elementor element in under five minutes.

AtomicKit is a CSS utility framework and WordPress plugin built specifically for Elementor v4. This quickstart walks you through installing the plugin, enabling the Elementor experiments it depends on, and applying your first utility classes — so you can start building more consistent, maintainable layouts right away.

## Prerequisites

Before you begin, make sure your environment meets the following requirements:

* **WordPress** 6.0 or later installed and running
* **Elementor** v4 installed and activated
* Administrator access to your WordPress dashboard
* A theme compatible with Elementor v4 (Hello Elementor or any block-based theme works well)

***

## Installation & Setup

<Steps>
  <Step title="Download AtomicKit">
    Download the latest AtomicKit plugin ZIP using the button below (or the **Download Plugin** button in the top-right of this site).

    <Card title="Download Plugin" icon="download" href="https://ucarecdn.com/94499765-33a0-436e-8c1a-dc5c26994974/atomickit.zip">
      Get the latest AtomicKit `.zip` file.
    </Card>
  </Step>

  <Step title="Install the AtomicKit plugin">
    In your WordPress admin sidebar, navigate to **Plugins → Add New**. You can install AtomicKit in two ways:

    * **Upload the ZIP file:** Click **Upload Plugin**, choose the AtomicKit `.zip` file you [downloaded](https://ucarecdn.com/94499765-33a0-436e-8c1a-dc5c26994974/atomickit.zip), then click **Install Now**.
    * **Search the directory:** Type `AtomicKit` in the search field, locate the plugin in the results, and click **Install Now**.

    Once installation completes, click **Activate Plugin** to enable it on your site.

    <Note>
      If you received AtomicKit as a downloadable ZIP (for example, through a license portal), use the upload method. The search method only finds plugins listed in the WordPress.org directory.
    </Note>
  </Step>

  <Step title="Enable required Elementor experiments">
    AtomicKit relies on two Elementor v4 experimental features. Go to **Elementor → Settings → Experiments** in your WordPress admin and enable both:

    * **Atomic Elements** — unlocks the component architecture AtomicKit hooks into
    * **Global CSS Variables** — allows Elementor to expose and consume CSS custom properties that AtomicKit utilities reference

    After toggling each experiment on, click **Save Changes** at the bottom of the page. Elementor may prompt you to regenerate your CSS — go ahead and accept.

    <Warning>
      These experiments are required for AtomicKit to function correctly. Skipping this step means utility classes may not render as expected on the front end.
    </Warning>
  </Step>

  <Step title="Open the AtomicKit dashboard">
    With the plugin activated and experiments enabled, a new item appears in your WordPress admin sidebar: **Elementor → AtomicKit**. Click it to open the AtomicKit dashboard.

    From this dashboard you can:

    * Browse the available utility families (spacing, typography, layout, and more)
    * Configure plugin settings and output preferences
    * Check which utility classes are loaded on your site

    <Tip>
      Bookmark the AtomicKit dashboard — it's your reference for available class names as you build in Elementor.
    </Tip>
  </Step>

  <Step title="Apply your first utility classes">
    Open the Elementor editor for any page or template. Select a widget — a Heading, Container, or Section works well for a first test.

    In the left panel, go to the **Advanced** tab and locate the **CSS Classes** field. Type one or more AtomicKit utility classes directly into that field, separated by spaces:

    ```html theme={null}
    <!-- Applied via Elementor Advanced > CSS Classes field -->
    padding-6 rounded-lg shadow-md background-white
    ```

    Click **Update** (or preview in the editor) to see the classes applied. The widget will pick up the corresponding styles immediately — no custom CSS required.

    <Info>
      The **Advanced → CSS Classes** field is the standard Elementor mechanism for adding classes to any widget or container. AtomicKit is designed around this field, so every utility class you apply lives here, keeping your CSS clean and your styling decisions visible at a glance.
    </Info>
  </Step>
</Steps>

***

## How the class system works

Every AtomicKit utility is a single-purpose CSS class that maps to one or a small group of related CSS declarations. You combine classes in the **Advanced → CSS Classes** field to compose the look you want — similar to working with utility-first CSS in a code-based project, but entirely within the Elementor editor.

```html theme={null}
<!-- Spacing + shape + shadow -->
padding-6 rounded-lg shadow-md

<!-- Typography + color -->
text-xl font-semibold text-primary

<!-- Flex layout with responsive override -->
flex flex-col flex-row--on-m
```

<Note>
  Classes are applied directly to the element's root node in the rendered HTML. They don't interfere with Elementor's own inline styles — AtomicKit utilities and Elementor controls can coexist on the same widget.
</Note>

***

## Next steps

Now that AtomicKit is installed and you've applied your first classes, explore the core concepts that make the framework powerful:

<CardGroup cols={3}>
  <Card title="Variables" icon="palette" href="/concepts/variables">
    Learn how Elementor Variables act as shared design tokens and how they pair with AtomicKit utilities to keep values consistent across your site.
  </Card>

  <Card title="Responsive Utilities" icon="mobile" href="/concepts/responsive-utilities">
    Use the `--on-*` breakpoint suffix system to apply structural utility overrides at specific viewport widths.
  </Card>

  <Card title="Plugin Overview" icon="puzzle-piece" href="/plugin/overview">
    Get a full picture of everything AtomicKit includes — utility families, configuration options, and how the plugin integrates with Elementor v4.
  </Card>
</CardGroup>