NUICSS

Name: Introduction — Nofinite NUICSS
Author: Nofinite

Instant atomic CSS engine with perceptual OKLCH design tokens

Ultra-fast utility CSS engine powered by UnoCSS with semantic component superclasses and automatic dark mode tokens.

Why NUICSS?

Component Superclasses & Single Source of Truth: Eliminates messy 15-class utility clusters with clean, semantic superclasses (btn, card, input, badge, table-container).
Instant On-Demand Compilation: Powered by a high-speed JIT engine, compiling thousands of utility classes in milliseconds.
Turbopack & Next.js First-Class Support: Includes withNuicss for seamless Turbopack alias resolution and zero-friction builds.
Perceptual OKLCH Design Tokens: Harmonized design tokens (bg-page, bg-surface, text-default, border-default) for flawless dark mode transitions without color distortion.
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

Combining semantic superclasses with atomic utility overrides:

html

<div class="card p-6 flex items-center justify-between">
  <div>
    <h3 class="card-title text-lg">NUICSS Ecosystem</h3>
    <p class="card-description">Component superclasses and atomic styling engineered for speed.</p>
  </div>
  <button class="btn btn-primary">
    Get Started
  </button>
</div>

Core Sections

Installation & Setup — Add NUICSS to Next.js (Turbopack), Vite, or PostCSS projects.
CLI & Standalone Compiler — Standalone compilation, live file watching, codebase linting, and automated migrations.
Component Superclasses — Complete guide to btn, card, input, badge, and layout superclasses.
Theming & Design Tokens — Explore OKLCH tokens, semantic surfaces, and automatic dark mode.
Theme Studio — Interactive sandbox to customize color palettes and preview components live.
Configuration — Customize nuicss.config.ts, presets, and content scanning pipelines.
Architecture & Engine — Learn how the JIT compiler, layers, and directives operate.
Utilities Reference — Comprehensive reference guides for layout, flexbox, grid, spacing, and typography.