Welcome to uStatic CSS

A set of utility CSS classes for creating modern interfaces based on design system tokens.

Get Started View on GitHub

Why uStatic CSS?

uStatic CSS solves the problems of typical utility frameworks in microfrontends:

Unified Token System

Consistency across microfrontends thanks to a shared design system.

Modular Loading

Load only the styles you need — no extra CSS in your bundle.

Runtime Activation

Activate classes dynamically when needed.

SSR Compatible

Works safely on both server and browser.

Quick Example

<!-- Card with flexbox -->
<div class="flex justify-between items-center p-4 bg-white border border-gray-200 rounded">
  <span class="text-lg font-semibold text-gray-800">Title</span>
  <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 cursor-pointer">
    Button
  </button>
</div>

350+ Classes Available

Typography: sizes, weights, text colors
Spacing: margin and padding on all sides
Flexbox: alignment, direction, gap
Grid: grids with automatic columns
Positioning: relative, absolute, fixed, z-index
Background & Borders: colors, opacity, border radius
Animations: spin, blink, underline
And much more…