Sonner

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add https://ui.n2020.com/r/sonner.json

UsageCopy Anchor Link

Render Toaster once, in the root layout of the application. It reads the theme from next-themes.

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

<Toaster />

Call toast from anywhere to show a message.

toast("Deploy started");

ExamplesCopy Anchor Link

TypesCopy Anchor Link