Components
Sonner (Toaster)
Toast notifications wired to the app's design tokens.
The Toaster primitive is the app's configured sonner
toaster. Mount it once near the app root, then fire toasts from anywhere with
toast() from sonner. It ships themed success / info / warning / error /
loading icons and reads its surface colors from the app's --popover /
--border tokens, so toasts follow light and dark automatically.
Preview
'use client';import { toast } from 'sonner';import { Button } from '@web/components/ui/button';import { Toaster } from '@web/components/ui/sonner';export default function SonnerDemo() { return ( <div className="flex flex-wrap items-center gap-3"> <Toaster /> <Button variant="outline" onClick={() => toast.success('Invite sent', { description: 'ada@example.com will get an email shortly.', }) } > Show success toast </Button> <Button variant="outline" onClick={() => toast.error('Something went wrong')} > Show error toast </Button> </div> );}Import
// Mount once, e.g. in the root layout:
import { Toaster } from "@/components/ui/sonner";
// Fire toasts from anywhere:
import { toast } from "sonner";
toast.success("Saved");Props
Toaster forwards every sonner ToasterProps
— position, richColors, closeButton, duration, and the rest — on top of
the app's icon set and token-based styling. It takes no custom props of its own.