500+ utility classes for rapid UI development
Atomix utilities follow a consistent, predictable pattern:
.u-{property}-{value}
.u-{property}-{breakpoint}-{value}Explore our comprehensive collection of utility classes organized by category. Each category contains a set of related utilities that help you build consistent, responsive designs faster.
Margin and padding utilities with 0.25rem increments (0-64)
.u-m-4Margin 1rem (all sides).u-p-6Padding 1.5rem (all sides).u-mt-8Margin-top 2rem.u-px-4Padding left & right.u-mb-0Remove bottom marginDisplay, flexbox, grid, and positioning utilities
.u-flexDisplay flex.u-gridDisplay grid.u-justify-betweenSpace between.u-items-centerVertical center.u-gap-4Gap 1remFont size, weight, line height, and text utilities
.u-text-lgFont size large (1.125rem).u-font-boldFont weight 700.u-text-centerCenter align text.u-text-uppercaseTransform uppercase.u-lh-relaxedLine height 1.625Semantic color system for text, backgrounds, and borders
.u-text-primary-emphasisPrimary text.u-bg-success-subtleSuccess background.u-border-errorError border.u-text-secondary-emphasis-emphasisSecondary textBorder width, style, radius, and shape utilities
.u-border1px border all sides.u-border-topTop border only.u-roundedBorder radius 0.25rem.u-rounded-lgLarge radius 0.5rem.u-rounded-circle50% radius (circle)Width, height, min/max dimensions, and viewport units
.u-w-100Width 100%.u-h-100Height 100%.u-min-vh-100Min height 100vh.u-max-w-lgMax width 960pxPositioning, z-index, and placement utilities
.u-relativeRelative positioning.u-absoluteAbsolute positioning.u-stickySticky positioning.u-z-index-10Z-index 10Display, opacity, overflow, and visibility controls
.u-noneDisplay none.u-opacity-5050% opacity.u-overflow-hiddenHide overflow.u-overflow-x-autoHorizontal scrollCursor, pointer events, and user select utilities
.u-cursor-pointerPointer cursor.u-pointer-events-noneDisable pointer events.u-user-select-nonePrevent text selection.u-pr-autoEnable pointer eventsShadows, opacity, blend modes, and filter utilities
.u-shadow-smSmall shadow.u-shadow-lgLarge shadow.u-blur-smSmall blur effect.u-grayscaleGrayscale filterAll utilities support responsive breakpoints, allowing you to create adaptive designs that work across all device sizes. Simply prefix any utility with a breakpoint name to apply it only at that breakpoint and above.
All utilities support responsive breakpoints:
| Prefix | Min Width | Example |
|---|---|---|
(none) | 0px | .u-flex |
.u-sm- | 640px | .u-sm-d-block |
.u-md- | 768px | .u-md-grid-cols-2 |
.u-lg- | 1024px | .u-lg-grid-cols-3 |
.u-xl- | 1280px | .u-xl-p-8 |
See how to combine utility classes to create common UI patterns and layouts.
<div class="u-grid u-grid-cols-1
u-md-grid-cols-2
u-lg-grid-cols-3
u-gap-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div><div class="u-flex
u-justify-between
u-items-center
u-gap-4 u-p-4">
<span>Left</span>
<span>Right</span>
</div>Compose utilities - Combine multiple classes for complex layouts
Mobile-first - Start with base classes, add breakpoint modifiers
Semantic colors - Use emphasis variants (subtle, emphasis) for consistency
Spacing scale - Use consistent spacing values (0, 1, 2, 3, 4, 6, 8, 10, 12, 16, 20, 24, 32, 48, 64)
Performance - Avoid excessive nesting and redundant classes
Specificity - Utility classes have high specificity (0,2,0) to override component styles when needed
!important - Most utilities use !important to ensure consistent behavior
Customization - Modify the utility scale in your theme configuration