@genexus/nova

Nova Design System — a scalable foundation for building digital products with a unified visual language. Built on Chameleon web components.

Installation

npm install @genexus/nova

Peer dependency

Nova requires Chameleon Controls Library:

npm install @genexus/chameleon-controls-library@^6.33.1

Usage

1. Load CSS bundles

Nova provides CSS bundles that style Chameleon components. You can load them in two ways:

Option A: Load everything at once

Add a <link> to the all.css bundle, which includes all tokens, base styles, components, and utilities:

<link rel="stylesheet" href="/path/to/nova/bundles/css/all.css" />

Option B: Load individual bundles with ch-theme (recommended)

Use getBundles() or getThemeBundles() with Chameleon's <ch-theme> component for on-demand loading:

import { getBundles } from "@genexus/nova/bundles.js";

// Load specific bundles
const CSS = getBundles(
  ["base/base", "components/button", "components/input", "utils/form"],
  "/assets/css/nova/"
);

// Or load all theme bundles (components + utils + resets, excludes base)
import { getThemeBundles } from "@genexus/nova/bundles.js";
const allCSS = getThemeBundles("/assets/css/nova/");

Then bind to <ch-theme>:

<ch-theme .model=${CSS}></ch-theme>

2. Register Nova assets (icons)

import { registerNova } from "@genexus/nova/register-nova.js";

registerNova();

3. Serve Nova assets

Vite (recommended)

Use the official Vite plugin — it handles CSS hashing, asset serving in dev, and distribution builds automatically:

npm install @genexus/vite-plugin-nova @genexus/nova-build --save-dev

// vite.config.ts
import { defineConfig } from "vite";
import { nova } from "@genexus/vite-plugin-nova";

export default defineConfig({
  plugins: [nova()]
});

The plugin will:

• Serve Nova CSS, fonts, and icons during development
• Hash CSS filenames for cache-busting in production builds
• Inject setBundleMapping() into the HTML so getBundles() resolves hashed filenames
• Inline critical CSS (base/base, resets/box-sizing) and preload base/icons

See @genexus/vite-plugin-nova for all options.

Other frameworks

Copy the contents of node_modules/@genexus/nova/dist/ to your app's public/static directory so CSS bundles, fonts, and icons are served at runtime. For Angular, configure angular.json assets. Ensure the bundles/css/ and assets/ directories are accessible at the base path you pass to getBundles().

Available bundles

| Category | Bundles | |----------|---------| | Base | base/base, base/icons | | Scope | scope/theme-nova | | Resets | resets/box-sizing | | Components | components/accordion, components/avatar, components/breadcrumb, components/button, components/card, components/chat, components/checkbox, components/combo-box, components/dialog, components/dropdown, components/input, components/listbox, components/navigation-bar, components/pagination, components/pill, components/progress, components/radio-group, components/rating, components/search, components/segmented-control, components/sidebar, components/slider, components/splitter, components/switch, components/tabs, components/textarea, components/thumbs, components/toast, components/tooltip | | Utilities | utils/elevation, utils/form, utils/form--full, utils/layout, utils/link, utils/spacing, utils/typography | | All-in-one | all (includes everything) |

dist/ structure

dist/
├── bundles/css/          # CSS bundles (components, utils, base, scope, resets)
│   ├── all.css           # All-in-one bundle
│   ├── base/
│   ├── components/
│   ├── resets/
│   ├── scope/
│   └── utils/
├── assets/
│   ├── fonts/            # Inter + Raleway .woff2 files
│   └── icons/            # Icon sprite sheets
├── index.js              # Main entry (re-exports all)
├── bundles.js            # getBundles(), getThemeBundles(), setBundleMapping()
├── register-nova.js      # registerNova()
└── assets-manager.js     # Asset management utilities

License

Apache-2.0