NUICSS

NUICSS is an instant, on-demand atomic CSS engine powered directly by the blazing-fast UnoCSS compiler. It provides high-performance utility generation, semantic design tokens, and seamless toolchain integration with zero runtime overhead.

Why NUICSS?

• Instant On-Demand Compilation: Powered by UnoCSS under the hood, compiling thousands of utility classes in milliseconds.
• @nuicss Directive: Simple, standardized CSS integration for PostCSS and Vite.
• Zero Foreign Configuration: Works directly with nuicss.config.ts out of the box with zero boilerplate.
• Semantic Design Tokens: Harmonized with NUI and modern design systems, offering unified light and dark mode scales.
• Full Modern CSS Feature Set: Supports arbitrary values (w-[320px]), variant grouping (hover:(bg-primary text-white)), responsive breakpoints (sm:, md:, lg:, xl:), and native CSS variables.

Quick Example

<div class="flex items-center justify-between p-6 bg-surface border border-default rounded-lg shadow-sm">
  <div class="flex flex-col gap-1">
    <h3 class="text-lg font-bold text-default">NUICSS</h3>
    <p class="text-sm text-muted">Atomic styling engineered for speed and precision.</p>
  </div>
  <button class="px-4 py-2 bg-primary text-white font-medium rounded-md hover:bg-primary/90 transition-colors">
    Get Started
  </button>
</div>

Core Sections

• Installation & Setup — Add NUICSS to Next.js, Vite, or PostCSS projects.
• Configuration — Customize nuicss.config.ts, presets, and content scanning pipelines.
• Architecture & Engine — Learn how the JIT compiler, layers, and directives operate.
• Theming & Design Tokens — Explore semantic tokens for surfaces, borders, radii, and dark mode.
• Utilities Reference — Comprehensive reference guides for layout, flexbox, grid, spacing, typography, and borders.