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, a longer life, a close button.
this.toast.info('Import running…', { title: 'In progress', duration: 0, dismissible: true });
//                                            duration: 0 means "stay until dismissed"

// 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.afterDismissed.then((reason) => console.log(reason)); // 'timeout' | 'action' | 'manual' | 'replaced'
ref.dismiss();

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	false	Show the close button
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 by dropping a .sng-style--<name> rule in your CSS (setting --sng-p-* private aliases) and passing { style: '<name>' }.

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.

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,
      dismissible: false,
      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 get the base surface and are coloured through CSS 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;
}

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
--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.

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 --snackng-* onto daisyUI's --color-success, --color-error-content, --radius-box and friends. It trades the glass gradients for daisy's flat theme colours — if you want to keep the glass and only borrow the hues, skip the import and set the variables yourself.

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.

License

Apache-2.0