Sonner

Opinionated toast notifications.

Live demosonner

Toasts appear in the bottom-right corner.

Sonner is the toast library that replaced every other toast library. Stacking, swipe-to-dismiss, promise helpers, and a gorgeous default look — all in ~3kb. Mount once in your root layout.

Install

npm i sonner

Snippet

// app/layout.tsx
import { Toaster } from "sonner";
<Toaster theme="dark" richColors />

// anywhere
import { toast } from "sonner";
toast.success("Saved");
toast.error("Something went wrong");
toast.promise(saveData(), {
  loading: "Saving...",
  success: "Saved!",
  error: "Couldn't save",
});