Introduction

NuvoUI core is a human-readable, utility-first SCSS framework and the foundation layer of the NuvoUI design system. It ships SCSS only: no JavaScript, no runtime and no build plugin beyond Dart Sass.

Principles

• Human-readable names. between, x-center, bg-surface, p-4@md.
• apply() for everything. Every utility is also a mixin. @include apply(p(4), mx(auto), ms(2) md) takes breakpoints, states and custom values such as p(1.5rem).
• Design tokens. Colors, spacing, radii, type, shadows, z-index and motion are emitted as --nu-* custom properties. Classes and mixins output those tokens, so everything follows the active theme.
• Light and dark themes. Set data-theme="light" or data-theme="dark", or leave it out to follow the operating system.
• Right-to-left ready. Logical utilities (ps, me, text-start) mirror with dir="rtl".
• Fails at compile time. Unknown keys and values raise errors that name the valid options.

Install

npm install -D sass @nuvoui/core

Core requires Dart Sass 1.79 or later (below 2.0).

Load and configure

Configure core once, in the first @use:

@use "@nuvoui/core" as * with (
  $brand: #4361ee,
  $generate-utility-classes: true
);

Leave $generate-utility-classes at its default false to use only apply() mixins and tokens; tokens are emitted either way.

Next

apply()Every utility as a mixin, with states, breakpoints and custom values.

TokensThe --nu-* custom properties behind every class and mixin.

SpacingPadding, margin, gap and child spacing on the --nu-space-* scale.

Mixin and function referenceEvery public mixin and function, generated from the doc blocks in the source.

Setup guidesSet up core in React, Next.js, Vue, Svelte, Astro or plain HTML.

PlaygroundWrite SCSS with core and see the compiled CSS in the browser.