Quick start

Mount one Toaster, import the stylesheet once, then call dynaura from anywhere.

Setup

import { Toaster, dynaura } from "dynaura";
import "dynaura/styles.css";

export default function App() {
  return (
    <>
      <Toaster />
      <button
        onClick={() =>
          dynaura.success({
            title: "Saved",
            description: "Your changes are live.",
          })
        }
      >
        Save
      </button>
    </>
  );
}

Next.js

The bundle ships with "use client", so you can render <Toaster /> straight from the App Router root layout. This very site does exactly that.

Result

The snippet above produces this island: