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

# Import CSS into AtomicKit from Paste, URL, or File

> Import CSS utility classes into AtomicKit by pasting raw CSS, fetching from a URL, or uploading a .css file, with a diff preview before committing changes.

The AtomicKit Import Center lets you bring CSS utility classes into Elementor from three sources: paste raw CSS directly, provide a public URL, or upload a `.css` file. Before any changes are applied, you review a diff that shows which classes are brand new and which existing classes would be overwritten. Nothing is committed to Elementor until you confirm.

## Import Methods

<CardGroup cols={3}>
  <Card title="Raw CSS Paste" icon="clipboard">
    Paste CSS text directly into the input area. Use this when you have CSS on your clipboard from a design tool export, a code editor, or another plugin.
  </Card>

  <Card title="URL Fetch" icon="link">
    Enter the public URL of a hosted `.css` file. AtomicKit fetches the file and parses it for you. The URL must be publicly accessible — authenticated or locally hosted files cannot be fetched.
  </Card>

  <Card title="File Upload" icon="file-arrow-up">
    Drag and drop a `.css` file onto the upload zone, or click **Browse** to select one from your computer. Only `.css` files are accepted.
  </Card>
</CardGroup>

## Understanding the Diff Preview

After you provide CSS through any of the three methods, AtomicKit parses the input and displays a diff preview before making any changes. The diff has two sections:

| Section                  | What it shows                                                                                                                     |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
| **New**                  | Classes found in the imported CSS that do not yet exist in your Elementor registry — these will be added                          |
| **Overwrite (Existing)** | Classes in the imported CSS whose names match classes already in Elementor — importing will replace their current property values |

Review both sections carefully. If you see an overwrite you did not intend, you can cancel, rename the conflicting class in your source CSS, and re-import.

<Note>
  Classes listed under **New** are safe additions. Classes listed under **Overwrite** will replace existing property values on those classes — the original values will be lost unless you have a snapshot to restore from.
</Note>

## Completing an Import

<Steps>
  <Step title="Open the Import Center">
    In your WordPress admin, go to **Elementor → AtomicKit** and select the **Import** tab.
  </Step>

  <Step title="Choose an input method and provide the CSS">
    Select **Paste**, **URL**, or **File Upload** and provide your CSS source. For URL fetches, click **Fetch** to retrieve the file. For file uploads, drag the file onto the upload zone or click **Browse**.
  </Step>

  <Step title="Review the diff preview">
    Read through the **New** and **Overwrite** sections. Confirm that the classes being added or replaced are exactly what you intend. If anything looks wrong, click **Cancel** to start over without making any changes.
  </Step>

  <Step title="Confirm the import">
    Click **Confirm Import**. AtomicKit writes the new and updated classes to Elementor's global class registry. The import is tracked so future re-imports of the same source show an accurate diff.
  </Step>
</Steps>

<Tip>
  Create a [Snapshot](/plugin/snapshot-history) before importing a large set of classes. If the result is not what you expected, you can restore the snapshot and try again with adjusted source CSS.
</Tip>

<Warning>
  Classes in the **Overwrite** section will have their current property values replaced permanently. Without a snapshot, there is no way to recover the previous values after confirming an import.
</Warning>

## After Import

Once confirmed, all imported classes appear in the [Class Manager](/plugin/class-creator) immediately. You can edit any imported class, assign it to elements in the Elementor editor, or export the updated set using the [Export Center](/plugin/export).

## Related

* [Export](/plugin/export) — package your design system for backup or team sharing
* [Snapshot History](/plugin/snapshot-history) — save a restore point before importing