Toast

The wrapper restyles Sonner and is identical in both flavors. Typed toasts carry one hue across the ring, the faint fill, and the icon, while the message itself stays in ink. The card keeps the overlay radius: a toast floats above the page, so it rounds like every lifted surface in the kit.

Installation

npm install next-themes sonner

Usage

Mount one Toaster at the root, then call toast from anywhere. This site mounts it in the root provider.

import { Toaster } from "@/components/ui/sonner";

export function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <Toaster position="top-center" />
    </>
  );
}

import { toast } from "sonner";

toast.success("Command copied");
toast("Thread archived", {
  description: "It stays in the archive until you restore it.",
  action: { label: "Undo", onClick: restore },
});

Examples

Types and promises

info and warning follow the callout hues. toast.promise renders the loading state with the kit's one sanctioned spinner, then settles into success or error.

API Reference

Toaster

Wraps Sonner's Toaster and accepts all of its props; the wrapper only sets the house styling through toastOptions.classNames and reads the theme from next-themes.

toast

Import toast from sonner directly: toast(title, options), toast.success, toast.error, toast.info, toast.warning, and toast.promise are the calls this kit styles.