@fluix-ui/angular

Angular adapter for Fluix UI components.

Install

npm install @fluix-ui/angular @fluix-ui/core @fluix-ui/css

Usage

1. Import the Toaster in your app (e.g. AppComponent or root layout):

import { FluixToasterComponent } from "@fluix-ui/angular";
import "@fluix-ui/css";

@Component({
  standalone: true,
  imports: [FluixToasterComponent],
  template: `<fluix-toaster />`,
  // ...
})
export class AppComponent {}

2. Optional config (position, layout, offset):

<fluix-toaster [config]="{ position: 'bottom-right', layout: 'notch' }" />

3. Show toasts by injecting the service:

import { FluixToastService } from "@fluix-ui/angular";

@Component({ ... })
export class MyComponent {
  constructor(private fluix: FluixToastService) {}

  onSave() {
    this.fluix.success("Saved!");
    // or
    this.fluix.success({ title: "Done", description: "Your changes were saved." });
  }

  onError() {
    this.fluix.error("Something went wrong");
  }
}

Custom description (template, like React/Vue)

For rich content (e.g. promise success), pass a template + context instead of a string:

import { FluixToastService, type FluixDescriptionTemplate } from "@fluix-ui/angular";
import { TemplateRef, ViewChild } from "@angular/core";

@Component({ ... })
export class MyComponent {
  @ViewChild("myTemplate") myTemplate!: TemplateRef<MyData>;

  constructor(private fluix: FluixToastService) {}

  showWithTemplate() {
    this.fluix.success({
      title: "Done",
      description: {
        templateRef: this.myTemplate,
        context: { label: "Value" },
      } satisfies FluixDescriptionTemplate<MyData>,
    });
  }
}

<ng-template #myTemplate let-data>
  <div class="my-content">{{ data.label }}</div>
</ng-template>

Use the same shape in fluix.promise(..., { success: (data) => ({ description: { templateRef, context: data } }) }).

Custom themes

Pass any theme name — themes are pure CSS. See @fluix-ui/css for details.

this.fluix.success({ title: "Done", theme: "midnight" });

Menu (new)

Use FluixMenuComponent with FluixMenuItemComponent for a keyboard-accessible menu indicator.

import { FluixMenuComponent, FluixMenuItemComponent } from "@fluix-ui/angular";

@Component({
  standalone: true,
  imports: [FluixMenuComponent, FluixMenuItemComponent],
  template: `
    <fluix-menu [defaultActiveId]="'home'" variant="pill" theme="dark">
      <fluix-menu-item menuId="home" label="Home" />
      <fluix-menu-item menuId="projects" label="Projects" />
      <fluix-menu-item menuId="settings" label="Settings" />
    </fluix-menu>
  `,
})
export class AppComponent {}

Custom indicator fill

Override the indicator color with the fill input:

<fluix-menu [defaultActiveId]="'home'" fill="#6366f1">
  <fluix-menu-item menuId="home" label="Home" />
</fluix-menu>

Notch

Use FluixNotchComponent as a standalone adaptive island.

import { FluixNotchComponent } from "@fluix-ui/angular";

@Component({
  standalone: true,
  imports: [FluixNotchComponent],
  template: `
    <fluix-notch [config]="{ position: 'top-center', title: 'Now playing', description: 'Fluix Theme' }" />
  `,
})
export class AppComponent {}

API

• FluixToastService (injectable): success(), error(), warning(), info(), action(), promise(), dismiss(id), clear(position?), getMachine()
• FluixToasterComponent: standalone component; place once in your app.
• FluixNotchComponent: standalone component for the adaptive notch UI.
• FluixMenuComponent and FluixMenuItemComponent: standalone components for animated menu navigation.
• FluixDescriptionTemplate<T>: { templateRef: TemplateRef<T>; context: T } for custom description content.
• fluix: imperative API re-exported from @fluix-ui/core (use the service for Angular apps).

Docs

• Official docs: https://fluix.ivanlopezdev.es
• Source code: https://github.com/ivanlhz/fluix