Setup

Plain HTML

Link the prebuilt stylesheet, import it in a bundler, or compile your own configuration with the sass command line.

Install

sass is needed only to compile your own configuration. The prebuilt stylesheet ships in the package.

Terminal

npm install -D sass @nuvoui/core

Set up

Write the stylesheet

One file configures core and holds your own rules. The pkg: prefix lets the sass command line find the package in node_modules.

src/styles/main.scss

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

.card {
    @include apply(p(4), bg(surface), rounded(md), shadow(md) hover, p(6) md);
}

.card__title {
    @include apply(m(0), font-size(lg), font(semibold));
}

.card__text {
    @include apply(mt(2), mb(0), text-color(muted));
}

Compile it

--pkg-importer=node turns on the Node package importer. watch:css recompiles on every save.

package.json

"scripts": {
  "build:css": "sass --pkg-importer=node --style=compressed src/styles/main.scss dist/main.css",
  "watch:css": "sass --pkg-importer=node --watch src/styles/main.scss dist/main.css"
}

Link it and use it

Utility classes and your apply() rules sit side by side in the markup.

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My app</title>
    <link rel="stylesheet" href="dist/main.css">
</head>
<body>
    <main class="grid gap-4 p-6">
        <div class="flex between x-center gap-3 p-4 bg-surface border rounded-md">
            <span class="font-semibold">Invoices</span>
            <span class="bg-success-subtle text-success text-xs rounded-full px-2 py-1">Paid</span>
        </div>
        <article class="card">
            <h2 class="card__title">Quarterly report</h2>
            <p class="card__text">Revenue and churn for July to September.</p>
        </article>
    </main>
</body>
</html>

Prebuilt CSS

The package ships every utility class with the default configuration in dist/nuvoui.min.css: about 960 KB minified, 98 KB gzipped. Link it with no build step, or import it from the entry of a bundler such as Vite. apply() and your own configuration need the Sass route above.

index.html

<link rel="stylesheet" href="node_modules/@nuvoui/core/dist/nuvoui.min.css">

src/main.js

import '@nuvoui/core/min.css'

Dark mode

With no data-theme on <html>, the tokens follow the operating system setting. Set data-theme="dark" or data-theme="light" to choose one, and change it from a script to switch at runtime: document.documentElement.dataset.theme = "dark". Any element can carry data-theme to theme only its own subtree. Every class and every apply() rule reads the tokens, so nothing else changes.

index.html

<html lang="en" data-theme="dark">

What gets emitted

dist/main.css holds the tokens, the light and dark themes, the reset, the base styles, the tooltips, the @property registrations, every utility class and the .card rules: about 1 MB compressed, 93 KB gzipped. With $generate-utility-classes: false it is about 42 KB, for sites that style everything with apply().

All guides Read about apply()Read about theming