Frameworks

Novus Design for Vite

Vite projects, vanilla JS or any framework template, consume the kit with zero configuration: import the stylesheet in your entry module and Vite bundles the Carlito fonts and rewrites their URLs automatically.

1. Install and import

npm install novus-design-kit

// src/main.js, first lines of the entry module
import "novus-design-kit/js/novus-theme.js";
import "novus-design-kit/tokens.css";

That's the whole setup: the @font-face rules in tokens.css use relative URLs, so Vite resolves the woff2 files out of the package, hashes them, and serves them in dev and build without any plugin.

2. Use components in plain HTML

<div id="app">
  <button class="btn btn--primary">Talk to us</button>
  <span class="badge badge--success"><span class="badge__dot"></span> Live</span>
</div>

3. Brand assets as imports

import lockup from "novus-design-kit/logos/lockups/novapay.png";
document.querySelector("#mark").src = lockup;   // hashed, cache-safe URL

4. Zero-flash dark mode (optional)

Module imports run after first paint, so a user whose saved theme differs from their OS preference can see a one-frame flash. To remove it, keep the module import (it provides novusTheme.toggle()) and add this tiny blocking pre-paint snippet inline in index.html, a /node_modules script tag does not survive vite build:

<head>
  <script>
    try {
      var t = localStorage.getItem("novus-theme");
      if (t === "light" || t === "dark")
        document.documentElement.setAttribute("data-theme", t);
    } catch (e) {}
  </script>
</head>

Verified result

Rendered from this guide's own sample project, executed and verified on 2026-08-26 against vite 8.

Rendered sample: the kit styling Vite components

Rules of the road

Import tokens.css exactly once, at the entry, not per component.
Reference assets through imports (hashed URLs) rather than copying files into public/.
tokens.css registers every logo asset as a url() token, so Vite copies the full logo set (~1.5 MB) into your build output, expected, and harmless for app builds.
Framework templates on Vite (React, Vue) follow their own guide for component patterns, this page covers the build tool layer.