Sonner
Toast notifications via Sonner, themed for light and dark mode.
Event notification with description and undo action.
<SonnerDemo />Usage
Mount Toaster once near the app root (e.g. layout). Call toast() from event handlers or effects.
import { Toaster, toast } from "@reva/ui";
// Root layout
<Toaster />;
// Anywhere
toast("Event has been created.");Examples
Types
<SonnerTypes />Description
<SonnerDescription />Position
Use the position option on individual toasts to move them. The Toaster from @reva/ui defaults to top-center; per-toast position overrides that for that notification only.
<SonnerPosition />Props
| Export | Role |
|---|---|
Toaster | Renders the toast region; pass through Sonner Toaster props as needed. |
toast | Imperative API from sonner (toast, toast.success, toast.error, toast.promise, …). |
Implementation follows shadcn Sonner: theme follows next-themes when ThemeProvider wraps the tree.
See the Sonner docs for the full API.