CSS + JS (Angular / vanilla)

The @antumo/design npm package delivers the full design system as CSS + zero-dependency JavaScript.

CSS

SCSS import (bundlers)

@use '@antumo/design';

Includes tokens (CSS variables), component classes, and utilities.

CSS link (no bundler)

<link rel="stylesheet" href="node_modules/@antumo/design/web/dist/antumo.css">

Tokens only

If you only need the design tokens (colors, typography, spacing, effects) without component classes:

@use '@antumo/design/tokens';

JavaScript

Two approaches — choose one.

A. Data attributes (no bundler)

For Blazor, ASP.NET MVC, vanilla HTML. Add a single <script> and drive everything with HTML attributes.

<script src="node_modules/@antumo/design/web/dist/antumo.min.js"></script>

Auto-init runs on DOMContentLoaded. Example — a modal:

<button data-antumo-toggle="modal" data-antumo-target="#myModal">Open</button>

<div class="modal" id="myModal" style="display:none">
  <div class="modal-content" role="dialog" tabindex="-1">
    <div class="modal-header">
      <h2>Title</h2>
      <button class="modal-header-close" data-antumo-dismiss="modal">Close</button>
    </div>
    <div class="modal-body">Hello, world.</div>
  </div>
</div>

Overlay click + Escape close automatically. Focus trap and scroll lock are handled.

B. Imperative API (ESM)

For Angular, React, or any bundler with ESM support:

import { Modal, Sidebar, Tooltip, autoInit } from '@antumo/design/js';

const modal = Modal.getOrCreateInstance(document.querySelector('#myModal'));
modal.show(triggerEl); // triggerEl regains focus on close
modal.hide();

// or let data attributes work:
autoInit();

Types ship with the package (@antumo/design/js exposes .d.ts), so you get full IntelliSense.

Angular + PrimeNG

// app.config.ts
import { providePrimeNG } from 'primeng/config';
import AntumoPreset from '@antumo/design/primeng';

export const appConfig = {
  providers: [
    providePrimeNG({
      theme: {
        preset: AntumoPreset,
        options: { darkModeSelector: '[data-theme="dark"]' },
      },
    }),
  ],
};

Import CSS in angular.json:

"styles": ["node_modules/@antumo/design/web/dist/antumo.css"]

Data attributes reference

Attribute	Value	Purpose
data-antumo-toggle	modal / sidebar / tooltip	Trigger an action
data-antumo-target	CSS selector	Target element
data-antumo-dismiss	modal	Close nearest component
data-antumo-placement	top / bottom / left / right	Tooltip position
data-antumo-persist	true / false	Sidebar: save state to localStorage

Events

All events bubble as antumo:{component}:{action} (e.g. antumo:modal:shown). Before-events (:show, :hide) are cancelable:

el.addEventListener('antumo:modal:hide', (e) => {
  if (hasUnsavedChanges) e.preventDefault();
});

See the component catalog for markup of every component.