# AtomicKit

> Elementor V4 Class manager

## Docs

- [AGENTS](https://atomickit.copyelement.com/AGENTS.md)
- [Border Radius Utilities for Rounded Corners in AtomicKit](https://atomickit.copyelement.com/borders/radius.md): Round corners of Elementor elements using AtomicKit rounded-* utilities, with side and corner variants for precise border radius control.
- [Border Style in AtomicKit: Solid, Dashed, and None](https://atomickit.copyelement.com/borders/style.md): Apply border styles to Elementor elements using AtomicKit's border-solid, border-dashed, and border-none utilities to define how border lines are drawn.
- [Border Width Scale: All Sides, Directional, and Axis](https://atomickit.copyelement.com/borders/width.md): Set element border widths in Elementor using AtomicKit's border-* scale, with directional and axis variants for one-sided and paired edge control.
- [AtomicKit Background Color Utilities for Elementor](https://atomickit.copyelement.com/colors/background-colors.md): Fill Elementor sections, cards, and panels with AtomicKit's background-* classes covering structural grays and six semantic tokens with shade ramps.
- [AtomicKit Border Color Utilities for Elementor Elements](https://atomickit.copyelement.com/colors/border-colors.md): Style borders on Elementor elements with AtomicKit's border-* classes, always combined with border-width and border-style for visible borders.
- [Text Color Utilities: Semantic and Structural Classes](https://atomickit.copyelement.com/colors/text-colors.md): Apply semantic and structural text colors in Elementor using AtomicKit's text-* classes for hierarchy, links, status indicators, and brand emphasis.
- [Border Utilities for Width, Style, Radius, and Color](https://atomickit.copyelement.com/concepts/borders.md): AtomicKit's border system covers width, style, radius, and color in one unified set of utilities including directional and corner-specific controls.
- [AtomicKit Color Palette: Grays and Semantic Tokens](https://atomickit.copyelement.com/concepts/colors.md): AtomicKit's color system includes structural grays, six semantic tokens with 11-step shade ramps, and text, background, and border utility classes.
- [Button Presets and Component Classes for AtomicKit](https://atomickit.copyelement.com/concepts/components.md): AtomicKit ships semantic button presets for Elementor — combine a color class like button-primary with a size modifier like button-lg for styled buttons.
- [Opacity and Box Shadow Effect Utilities in AtomicKit](https://atomickit.copyelement.com/concepts/effects.md): AtomicKit effects utilities cover a full opacity scale and standalone outer and inset box-shadow presets for depth and visual hierarchy in Elementor.
- [CSS Filter Utilities for Images and Media in AtomicKit](https://atomickit.copyelement.com/concepts/filters.md): AtomicKit's filter utilities apply blur, brightness, contrast, saturation, hue rotation, and color effects to images and decorative layers in Elementor.
- [Fluid Scaling: CSS clamp() for Typography and Spacing](https://atomickit.copyelement.com/concepts/fluid-scaling.md): Discover how AtomicKit uses CSS clamp() to scale font sizes, spacing, and gaps smoothly across viewport widths without relying solely on breakpoints.
- [Layout Utilities: Display, Overflow, and Positioning](https://atomickit.copyelement.com/concepts/layout.md): Control display, overflow, and positioning for Elementor elements with AtomicKit's layout utilities — from block and flex to z-index and object-fit.
- [Responsive Breakpoints with the --on-* Suffix System](https://atomickit.copyelement.com/concepts/responsive-utilities.md): Apply AtomicKit utility classes at specific viewport sizes using the --on-xs through --on-xxl breakpoint suffix system for responsive Elementor layouts.
- [Width, Height, and Min/Max Sizing Utilities in AtomicKit](https://atomickit.copyelement.com/concepts/sizing.md): Control element dimensions in Elementor with AtomicKit's width, height, and min/max sizing utilities using a t-shirt scale, fractions, and keyword helpers.
- [Spacing Utilities: Margin, Padding & Gap in AtomicKit](https://atomickit.copyelement.com/concepts/spacing.md): AtomicKit's spacing system uses a consistent 4px scale for margin, padding, and gap utilities to create predictable rhythm in your Elementor layouts.
- [Typography Utilities: Type Scale and Styles in AtomicKit](https://atomickit.copyelement.com/concepts/typography.md): AtomicKit's typography system covers fluid font sizes, font weights, line heights, letter spacing, text alignment, and text style utilities for Elementor.
- [Elementor Variables: Shared Design Tokens in AtomicKit](https://atomickit.copyelement.com/concepts/variables.md): Learn how Elementor Variables act as shared design tokens and how they work alongside AtomicKit utility classes to keep your site consistent.
- [Box Shadow Presets for Elevation and Depth in AtomicKit](https://atomickit.copyelement.com/effects/box-shadow.md): Add elevation and depth to Elementor elements using AtomicKit outer and inset shadow presets, with semantic color variants for status-driven UI.
- [AtomicKit Opacity Scale: opacity-0 Through opacity-100](https://atomickit.copyelement.com/effects/opacity.md): Control element transparency in Elementor using AtomicKit opacity classes from opacity-0 to opacity-100 for overlays, disabled states, and layering.
- [Flex Alignment Utilities: Justify, Items, and Self](https://atomickit.copyelement.com/flexbox/alignment.md): Align flex items on both axes in Elementor using AtomicKit's justify-*, items-*, self-*, and content-* utilities with responsive breakpoint support.
- [Flex Direction, Wrap, and Order Utilities in AtomicKit](https://atomickit.copyelement.com/flexbox/direction.md): Set flex direction and wrap behavior in Elementor using AtomicKit's flex-row, flex-col, flex-wrap, basis, grow, shrink, and order utilities.
- [Flex Containers: .flex and .inline-flex in AtomicKit](https://atomickit.copyelement.com/flexbox/flex.md): Activate flexbox on any Elementor element with AtomicKit's .flex and .inline-flex utilities, and switch display modes responsively with --on-* suffixes.
- [Gap Utilities for Flex Container Spacing in Elementor](https://atomickit.copyelement.com/flexbox/gap.md): Space flex children in Elementor using AtomicKit's gap, gap-x, and gap-y utilities — uniform or axis-specific spacing without adding margins to children.
- [Introduction to AtomicKit: Elementor v4 CSS Utilities](https://atomickit.copyelement.com/introduction.md): AtomicKit gives Elementor v4 designers a complete atomic CSS utility framework and design system manager to build consistent, responsive websites faster.
- [Class Creator: Build and Manage CSS Utility Classes](https://atomickit.copyelement.com/plugin/class-creator.md): Use AtomicKit's Class Creator to build Elementor global classes with property selectors, breakpoint scopes, design token references, and live CSS preview.
- [AtomicKit Dashboard: Live Metrics and Health Checks](https://atomickit.copyelement.com/plugin/dashboard.md): The AtomicKit dashboard shows live counts of global classes, CSS variables, and tracked imports, plus health diagnostics for Elementor v4 experiments.
- [Export Your Elementor Design System as CSS or JSON](https://atomickit.copyelement.com/plugin/export.md): Export Elementor global classes from AtomicKit as a .css stylesheet or .json schema, with options to export all classes or a filtered selection.
- [Import CSS into AtomicKit from Paste, URL, or File](https://atomickit.copyelement.com/plugin/import.md): 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.
- [AtomicKit Plugin: Features and Admin Panel Overview](https://atomickit.copyelement.com/plugin/overview.md): AtomicKit adds a dedicated WordPress admin panel with a class creator, variables manager, import/export tools, and snapshot history for Elementor.
- [Snapshot History: Save and Restore Design Checkpoints](https://atomickit.copyelement.com/plugin/snapshot-history.md): Use AtomicKit's Snapshot History to save named checkpoints of your design system and roll back to any previous state if a change goes wrong.
- [Variables Manager: Create and Manage Design Tokens](https://atomickit.copyelement.com/plugin/variables-manager.md): Use AtomicKit's Variables Manager to create, edit, and delete Elementor global CSS variables for colors, fonts, sizes, and custom tokens across your site.
- [Quickstart: Install AtomicKit and Apply Utility Classes](https://atomickit.copyelement.com/quickstart.md): Install AtomicKit, enable required Elementor experiments, and apply your first utility classes to an Elementor element in under five minutes.
- [Margin Utilities: Control External Spacing in AtomicKit](https://atomickit.copyelement.com/spacing/margin.md): Control external spacing around Elementor elements with AtomicKit's margin, margin-horizontal, margin-vertical, and directional margin utilities.
- [Padding Utilities: Control Internal Spacing in AtomicKit](https://atomickit.copyelement.com/spacing/padding.md): Add internal spacing inside Elementor elements with AtomicKit's padding, padding-horizontal, padding-vertical, padding-top, and padding-bottom utilities.