snackng

Toasts for Angular with a glass design, zero UI dependencies and CSS-variable theming.

No Angular Material. No CDK. No Tailwind. No icon font. Install it, call it, done — it renders correctly in any Angular app whatever else it uses.

Quick start

1. Install.

npm i snackng

2. Inject and call. There is no step 3 — no provider to register, no stylesheet to import, no theme tokens to define.

import { Component, inject } from '@angular/core';
import { SnackngService } from 'snackng';

@Component({/* … */})
export class SyncPage {
  private readonly toast = inject(SnackngService);

  save() {
    this.toast.success('Movements synced.', { title: 'Done' });
  }
}

That is a complete, working integration. Everything below is optional.

The next five things you'll want

// Four built-in types.
this.toast.success('Saved.');
this.toast.warning('3 records left unreconciled.');
this.toast.danger('Could not reach the server.');
this.toast.info('Next sync at 18:00.');

// A title and a longer life. The close button is already there.
this.toast.info('Import running…', { title: 'In progress', duration: 0 });
//                                            duration: 0 means "stay until dismissed"

// Unless you don't want it.
this.toast.success('Saved.', { dismissible: false });

// An action button, and knowing how it ended.
const ref = this.toast.success('Movement deleted.', {
  action: { label: 'Undo', handler: () => this.restore() },
});
ref.afterDismissed.then((reason) => {}); // 'timeout' | 'action' | 'manual' | 'replaced'
ref.dismiss(); // close it yourself

// Somewhere other than the top-right.
this.toast.info('Down here.', { position: 'bottom-center' });

// Your colours, from your own CSS. No ::ng-deep.
// :root { --snackng-success-bg: linear-gradient(135deg, #059669, #064e3b); }

Change the defaults globally — again, only if you want to:

bootstrapApplication(App, {
  providers: [provideSnackng({ duration: 4000, position: 'bottom-end' })],
});

Why another toast library

Most Angular toasts either wrap MatSnackBar — dragging in all of Angular Material and fighting its internal MDC surface with !important — or ship Tailwind classes that render as unstyled markup unless the consuming app happens to run the same CSS pipeline. snackng ships compiled, encapsulated CSS and owns its own overlay, so it has neither problem.

	snackng
Peer dependencies	@angular/core, @angular/common, @angular/platform-browser
Global CSS you must add	none
Stacks multiple toasts	yes (MatSnackBar shows one at a time)
Handles bursts	queued and staggered, never dropped
SSR	safe — no-ops on the server
Respects prefers-reduced-motion	yes
Angular	21 and up

API

toast.success(message, options?);
toast.warning(message, options?);
toast.danger(message, options?);
toast.info(message, options?);
toast.show(type, message, options?);   // custom types
toast.dismissAll();
toast.pending();                       // signal: how many are queued behind `max`

Every call returns a SnackngRef:

const ref = toast.success('Item deleted', {
  action: { label: 'Undo', handler: () => restore() },
});

ref.id; // 'sng-4'
ref.dismiss(); // close it yourself; resolves with 'manual'
ref.afterDismissed.then((reason) => console.log(reason));

afterDismissed is a promise, so it resolves once, for that one toast, and never fires again — it is not a stream. It settles after the exit animation, with one of four reasons:

Reason	When
'timeout'	duration elapsed. Never with duration: 0.
'action'	The action button was clicked (unless dismissOnClick: false).
'manual'	The close button, ref.dismiss(), or dismissAll().
'replaced'	Evicted under overflow: 'dismiss-oldest'.

To react to every toast, attach it where you create them rather than keeping one ref — full details and edge cases.

Options

Option	Type	Default
title	string	—	Bold line above the message
duration	number	5000	ms before auto-dismiss; 0 keeps it open
action	{ label, handler?, dismissOnClick? }	—	Snackbar-style button
position	SnackngPosition	'top-end'	top/bottom × start/center/end
dismissible	boolean	true	Close button; false hides it
politeness	'polite' | 'assertive' | 'off'	by type	Screen-reader urgency
style	SnackngStyle	'glass'	Glass preset — see below
effect	SnackngEffect	'drift'	Surface light effect — see below
panelClass	string | string[]	—	Extra classes on the toast element

Glass presets & surface effects

Don't want to hand-tune opacity and blur to get a look? Pick a preset. Each is a bundle of glass settings, applied per call, globally, or via a chained shortcut — all three are equivalent:

toast.success('Saved', { style: 'solid' }); // per call
toast.success.solid('Saved'); // chained sugar (built-in types)
provideSnackng({ style: 'solid' }); // global default for every toast

style	Look
'glass' (default)	Rich translucent glass with depth
'solid'	Nearly opaque, a whisper of glass
'translucent'	More of the background shows through
'transparent'	Barely-there tint, very see-through
'frosted'	Heavy blur, high tint — classic frosted glass
'flat'	Fully opaque, no blur — flat design, and the cleanest backdrop-filter fallback

Define your own with a .sng-style--<name> rule setting the five private aliases — --sng-p-tint, --sng-p-blur, --sng-p-spec, --sng-p-spec-size, --sng-p-drift-dur — and pass { style: '<name>' }. The rule has to be global; under Angular's default emulated encapsulation it silently does nothing. Same goes for panelClass. Example and preset values.

effect adds subtle motion/light to the glass surface — it never touches the enter/exit animations:

effect	Behaviour
'drift' (default)	A slow specular highlight drifts across the surface
'glare'	The highlight follows the pointer (hover)
'both'	Drift when idle, glare on hover
'none'	Static glass, no light motion

Both drift and the drift half of both stop under prefers-reduced-motion: reduce. 'glare' needs a pointer, so it is inert on touch — use 'both' if touch users should still get the drift.

Global defaults

Optional — only if you want to change the defaults.

import { provideSnackng } from 'snackng';

bootstrapApplication(App, {
  providers: [
    provideSnackng({
      duration: 4000, // ms; 0 = stay until dismissed
      position: 'bottom-end',
      max: 5, // visible at once
      overflow: 'queue', // 'queue' | 'dismiss-oldest'
      stagger: 90, // ms between releases; 0 = all at once
      pauseOnHover: true, // also pauses on keyboard focus
      dismissible: true, // close button on every toast; false hides them all
      style: 'glass', // default glass preset for every toast
      effect: 'drift', // 'drift' | 'glare' | 'both' | 'none'
      types: {
        deploy: { icon: '<svg viewBox="0 0 24 24"><path d="..."/></svg>' },
      },
    }),
  ],
});

Bursts

Toasts often arrive in clumps — an HTTP interceptor firing one per response, a batch job reporting each failure. snackng accepts every call immediately and paces how they reach the screen, so a burst never renders as one jarring flash.

Past max, toasts wait in a queue and are released one at a time as slots free, spaced by stagger ms. Nothing is dropped. Read how many are still waiting with toast.pending().

The trade-off is honest: a flood of 50 errors becomes a long parade. If you'd rather the newest always win, overflow: 'dismiss-oldest' evicts the oldest visible toast to make room, and those resolve afterDismissed with 'replaced'.

Custom types

Register one through provideSnackng, then emit it with show. It starts from the neutral surface and is recoloured through its own variables:

toast.show('deploy', 'Version 2.4.0 is now live in production.');

:root {
  --snackng-deploy-bg: linear-gradient(135deg, #7c3aed, #4c1d95);
  --snackng-deploy-ink: #ffffff;
  --snackng-deploy-solid: #6d28d9; /* where backdrop-filter is unsupported */
}

types[x].icon is injected as raw SVG and bypasses Angular's sanitizer. Treat it as code: never build it from user input.

Theming

Restyle everything from your own CSS — no ::ng-deep, no overrides fighting specificity. Set the variables anywhere they inherit to the toast (:root is simplest).

:root {
  --snackng-success-bg: linear-gradient(135deg, #059669, #064e3b);
  --snackng-radius: 8px;
  --snackng-blur: 0px;
  --snackng-title-weight: 600;
}

Variable	Default
--snackng-{type}-bg	glass gradient per type
--snackng-{type}-ink	#ffffff
--snackng-{type}-solid	opaque fallback where backdrop-filter is unsupported
--snackng-tint	0.86 — tint opacity (how much shows through)
--snackng-radius	14px
--snackng-blur	20px
--snackng-saturate	180%
--snackng-brightness	1.06
--snackng-gloss	0.22 — static highlight strength
--snackng-spec-strength / --snackng-spec-size	0.15 / 30% — drift & glare reflection
--snackng-drift-duration	4s — only affects drift / both
--snackng-blur-reduced	10px — under prefers-reduced-motion
--snackng-shift	28px — enter/exit travel; 0 under reduced motion
--snackng-action-size / --snackng-action-weight	13px / 600
--snackng-border	1px solid rgba(255,255,255,.22)
--snackng-shadow	layered drop + inner highlight
--snackng-min-width / --snackng-max-width	340px / 460px
--snackng-padding	14px 18px
--snackng-gap	14px
--snackng-font	'Manrope', system-ui, sans-serif
--snackng-title-size / --snackng-title-weight	14px / 700
--snackng-message-size / --snackng-message-weight	13px / 400
--snackng-line-height	1.45
--snackng-enter-duration / --snackng-exit-duration	400ms / 200ms
--snackng-z	2000
--snackng-stack-gap / --snackng-stack-padding	12px / 16px

{type} is success, warning, danger, info, or any custom type you register.

Your :root values beat presets, which beat the library defaults — the library never declares a public token on the toast itself, precisely so your override wins. Note that replacing --snackng-{type}-bg with a flat gradient disconnects --snackng-tint for that type, and that -solid is only used where backdrop-filter is unsupported. Every variable, with the reasoning.

Using daisyUI?

snackng does not depend on daisyUI or Tailwind. If you happen to use them, one optional import re-points the toast at your daisy theme, so it follows theme switching and dark mode for free:

@import 'snackng/themes/daisy.css';

That maps the twelve colour variables plus --snackng-radius and --snackng-font onto daisyUI semantics (note danger → --color-error). It trades the glass gradients for daisy's flat theme colours — to keep the glass and only borrow the hues, skip the import and set the variables yourself. Two gotchas: --snackng-font: inherit drops Manrope, and the bridge declares on :root, so a data-theme set on a subtree rather than <html> will not reach the toasts. Full mapping.

Accessibility

• Toast text is announced through a dedicated off-screen live region. danger announces assertive, everything else polite; override per call with politeness.
• The toast element itself carries no aria-live — nesting live regions is what causes the HierarchyRequestError seen in hand-rolled MatSnackBar wrappers.
• Under prefers-reduced-motion: reduce the slide becomes a plain fade and the blur eases off. The library never overrides that OS setting on your behalf.
• Timers pause on hover and on keyboard focus, so a toast can't vanish mid-read.

Documentation

This README is the tour. The details live next to the source:

• API reference — every export, every option, SnackngRef and afterDismissed, the precedence rules, SSR behaviour.
• Theming — all 40-odd CSS variables with defaults, the cascade, writing your own preset, the daisyUI bridge.
• Recipes — HTTP interceptor, undo, custom types, wrapping the service, accessibility notes.

License

Apache-2.0