Features

• 47 standalone component entry points — no NgModules, just import and use
• Tree-shakable — secondary entry points via ng-packagr, import only what you need
• Theming system — CSS custom properties with light/dark themes out of the box
• CDK layer — overlay/portal system, drag-drop, virtual-scroll, form-field primitives
• Signals-first — reactive state management with Angular signals
• Accessible — built-in a11y support with testing utilities (axe-core)
• Form integration — components implement FuiFormFieldControl for seamless fui-form-field integration

Installation

npm install @raintonic/formaui

Peer Dependencies

| Package | Range | Required | Needed for | | --------------------------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------------ | | @angular/common | ^21.0.0 | yes | all entry points | | @angular/core | ^21.0.0 | yes | all entry points | | @angular/forms | ^21.0.0 | yes | all entry points | | rxjs | ^7.4.0 | yes | all entry points | | @angular/router | ^21.0.0 | optional | components that render routerLink: breadcrumb, dual-tier-navigation, sidebar-nav-menu, toolbar, topbar | | @angular/platform-browser | ^21.0.0 | optional | @raintonic/formaui/test-utils only | | axe-core | ^4.11.1 | optional | @raintonic/formaui/test-utils only (a11y assertions) |

Optional peers are declared in peerDependenciesMeta, so npm does not install them for you and does not warn when they are missing. Install @angular/router if you use any of the navigation components listed above (any Angular app with routing already has it); install axe-core and @angular/platform-browser only in projects that import @raintonic/formaui/test-utils in their tests.

Browser support

FormaUI supports the last 2 versions of Chrome, Firefox, Safari, Edge, and iOS Safari. Internet Explorer is not supported.

Exact matrix: see .browserslistrc.

Versioning

FormaUI follows Semantic Versioning. From v1.0.0 onwards:

• MAJOR — breaking API changes
• MINOR — new features, backwards-compatible
• PATCH — bug fixes, backwards-compatible

Versions prior to 1.0.0 (0.x.x) did not carry a stability guarantee.

Quick start

Install:

npm install @raintonic/formaui

Import the styles — either the SCSS entry in src/styles.scss:

@use '@raintonic/formaui/styles' as fui;

or, without Sass, one of the precompiled CSS bundles in the styles array of angular.json:

"styles": ["@raintonic/formaui/styles.css", "src/styles.css"]

| Entry | Contents | | ---------------------------------- | ---------------------------------------------------------------------------------------------- | | @raintonic/formaui/styles | SCSS entry: tokens, light/dark themes, base and component styles, utilities, plus the Sass API | | @raintonic/formaui/styles.css | The same full bundle, precompiled to CSS | | @raintonic/formaui/utilities.css | Only the fui-* utility classes, precompiled (already included in the two entries above) |

Use components in a standalone component:

import { Component } from '@angular/core';
import { FuiButtonDirective } from '@raintonic/formaui/components/button';
import { FuiFormFieldComponent, FuiLabelComponent } from '@raintonic/formaui/components/form-field';
import { FuiInputDirective } from '@raintonic/formaui/components/input';

@Component({
  imports: [FuiButtonDirective, FuiFormFieldComponent, FuiLabelComponent, FuiInputDirective],
  template: `
    <fui-form-field>
      <fui-label>Email</fui-label>
      <input fuiInput type="email" />
    </fui-form-field>
    <button fuiButton variant="primary">Save</button>
  `,
})
export class MyFormComponent {}

See the full docs at formaui.raintonic.com.

Usage

All imports use secondary entry points:

import { FuiButtonDirective } from '@raintonic/formaui/components/button';
import { FuiFormFieldComponent } from '@raintonic/formaui/components/form-field';
import { FuiInputDirective } from '@raintonic/formaui/components/input';
import { FuiThemeService } from '@raintonic/formaui/services/theme';

Button

<button fuiButton variant="primary">Save</button> <button fuiButton variant="outline">Cancel</button>

Form Field

<fui-form-field>
  <fui-label>Email</fui-label>
  <input fuiInput type="email" />
</fui-form-field>

Theme Switching

import { FuiThemeService } from '@raintonic/formaui/services/theme';

export class AppComponent {
  private theme = inject(FuiThemeService);

  toggleDark() {
    this.theme.toggleTheme();
  }
}

Components

All components use the fui prefix and are standalone.

| Category | Components | | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Forms | autocomplete checkbox date-picker file-upload form-field input number-input password-input radio select slider strength-meter time-picker toggle toggle-group tree-select | | Data | data-table list paginator tree tree-table | | Layout | accordion card divider side-panel sidebar-nav-menu tab toolbar topbar | | Navigation | breadcrumb dual-tier-navigation stepper | | Feedback | alert badge chip empty-state progressbar skeleton spinner tooltip | | Actions | button button-group drawer dropdown-menu popover | | Display | avatar icon |

Import Pattern

import { Fui<Component> } from '@raintonic/formaui/components/<name>';

CDK

Low-level primitives for building custom components.

| Module | Description | | --------------------------------------- | ----------------------------------------------- | | @raintonic/formaui/cdk/overlay | Overlay and portal positioning system | | @raintonic/formaui/cdk/drag-drop | Drag and drop functionality | | @raintonic/formaui/cdk/virtual-scroll | Virtual scrolling for large lists | | @raintonic/formaui/cdk/form-field | Form field infrastructure and control interface |

Services

| Service | Import | Description | | ---------------- | ------------------------------------------ | ----------------------- | | Breakpoint | @raintonic/formaui/services/breakpoint | Responsive breakpoints | | Dialog | @raintonic/formaui/services/dialog | Modal dialog management | | Notification | @raintonic/formaui/services/notification | Toast notifications | | Theme | @raintonic/formaui/services/theme | Runtime theme switching |

Theming

FormaUI uses CSS custom properties (--fui-*) for all design tokens. Two themes are included:

• Light (default) — applied to :root
• Dark — toggled via FuiThemeService

Tokens cover spacing, typography, colors, motion, and elevation. Override any --fui-* variable to customize.

Development

npm run build:lib       # Build the library
npm test                # Run tests (Vitest)
npm run lint            # Lint
npm run serve:docs      # Serve docs app locally

Requires Node >= 22.16.0.

Documentation

Full documentation and live component demos at formaui.raintonic.com.

License

MIT — Copyright © Rain Tonic S.r.l.