Sonner

Toast notifications, themed and theme-synced.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens
import { Toaster, toast } from "@aspyn-io/kit";

Setup + firing toasts

Mount Toaster once in your root layout (inside ThemeProvider — it syncs to light/dark automatically), then call toast() from anywhere.

// app/layout.tsx
<ThemeProvider>
  {children}
  <Toaster />
</ThemeProvider>

// anywhere
toast("Route created");
toast.success("Appointment scheduled");
toast.error("Payment failed", { description: "Card was declined." });
toast("Sync complete", { action: { label: "View", onClick: () => {} } });

Notes

  • Built on sonner — promise toasts (toast.promise), dismissal, and stacking come free.
  • Toaster requires a ThemeProvider ancestor to follow light/dark.