Dynaura

At a glance

Dynaura is an MIT-licensed npm package for toast notifications styled after the iPhone Dynamic Island: a single pill at the top of the page that springs open to show a message, then collapses or swipes away. One shared core drives adapters for React, Vue 3, Svelte, Solid, Angular and plain JavaScript, and the docs describe it as zero-dependency and fully typed.

Good fit

Front-end developers who want a distinctive, motion-heavy notification style without pulling in an animation library. It suits apps with async saves, uploads or timers, since the API covers promise toasts that morph from loading to success or error, progress bars updated in place, sticky live activities with a timer or waveform, and card toasts such as a boarding pass or delivery tracker.

Consider something else when

Skip it if your interface needs several notifications visible at once. Dynaura shows one island: by default a newer toast replaces the current one, and the queue option only lines them up one after another. It is also a poor fit when different parts of a page need their own notification areas, because the docs allow one Toaster per page and route every call through that single global island.

Start here

Run npm install dynaura, import "dynaura/styles.css" once at the root, and mount a single <Toaster /> in your root layout (Vue, Solid and others swap the import path, for example dynaura/vue). Then call dynaura.success("Saved") from any file; no provider or hook is needed. The docs Playground lets you set every option and copy the generated code.

Cost and requirements

The package is MIT licensed and published on npm; no paid tier or hosted service appears in its documentation. You need a JavaScript build that can import the package stylesheet. The default stylesheet pulls a font from Google Fonts through an @import; dynaura/styles-no-font.css drops it for strict Content Security Policy setups or your own font.

Limits to know

Only one Toaster may be mounted per page, and development builds warn if you add a second. Tap handlers on the island are pointer-only, so keyboard-reachable actions must go in the button option. Default settings vibrate supported phones on every toast (haptics) and use a dark theme at the top of the screen, so check those before shipping. The API states strings are always inserted as text, never HTML.

Related work

• lit-toaster, another toast notification library, packaged for Lit web components (alternative)
• Animations on the Web, a course on easing, timing and CSS animation (context)

Still unclear

• The documentation calls the package light but gives no bundle size, so its cost against a page weight budget is not established.
• Supported framework versions are stated only for Vue (Vue 3); the React, Svelte, Solid and Angular version ranges are not given in the pages read.
• Server-side rendering behaviour, for example in Next.js or Nuxt, is not covered in the pages read.