Frameworks

Novus Design for React

The kit ships no React wrappers by design, its classes and tokens are the API. Import one stylesheet at the app root and use the component classes in JSX; everything re-tunes for dark mode automatically.

1. Install and wire

npm install novus-design-kit

// main.tsx / index.jsx, once, before anything renders
import "novus-design-kit/js/novus-theme.js";
import "novus-design-kit/tokens.css";

2. Use the classes in JSX

export function ProductCard({ title, summary, onOpen }) {
  return (
    <div className="card card--interactive" style={{ position: "relative" }}>
      <h3>{title}</h3>
      <p className="muted">{summary}</p>
      <button className="card-trigger" aria-label={`Open ${title}`} onClick={onOpen} />
    </div>
  );
}

<button className="btn btn--primary" onClick={submit}>Talk to us</button>

3. Theme toggle

<button className="btn btn--ghost btn--sm"
        onClick={() => window.novusTheme.toggle()}>
  Theme
</button>

4. Brand assets

import logoColour from "novus-design-kit/logos/Novus_Logo_Colour_transparent.png";
import logoWhite  from "novus-design-kit/logos/Novus_Logo_White_transparent.png";

<img className="brandlogo--light" src={logoColour} alt="Novus Technologies" />
<img className="brandlogo--dark"  src={logoWhite}  alt="Novus Technologies" />

Verified result

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

Rules of the road

• Don't build a parallel component library of styled wrappers, a thin local component that applies kit classes (like ProductCard above) is fine; re-implementing .btn/.card visuals in CSS-in-JS is not.
• In styled-components/emotion/CSS modules, reference var(--…) tokens, never literal values the tokens define.
• Using a component library on top? See the theme guides: Ant Design, Material, Fluent 2.