Features

• 44 standalone components — 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

{
  "@angular/common": "^21.0.0",
  "@angular/core": "^21.0.0",
  "@angular/forms": "^21.0.0"
}

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 base styles in src/styles.scss:

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

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({
  standalone: true,
  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="secondary">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 time-picker toggle tree-select | | Data | data-table list paginator tree tree-table | | Layout | accordion card divider side-panel sidebar-nav-menu tab toolbar topbar | | Navigation | breadcrumb stepper | | Feedback | alert badge chip empty-state progressbar skeleton spinner tooltip | | Actions | button button-group drawer 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 | | ---------------- | ------------------------------------------ | ----------------------- | | 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 (Jest)
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.