Sonner
Stacked toast notifications from Sonner, styled by the theme.
Pick one toast system
@zynactra/ui ships two: Sonner (this page) and Base UI's Toast. New apps should use Toast, since it shares Base UI's accessibility model with every other component. Sonner is here for apps that already use it.Installation
Add Sonner to your app (you call its toast() directly), then mount the Toaster once in the root layout:
pnpm add sonnerimport { Toaster } from "@zynactra/ui/sonner"
<body>
{children}
<Toaster />
</body>The Toaster reads light or dark from next-themes when it's present; otherwise it follows the system.
Usage
import { toast } from "sonner"
toast("Invoice sent", { description: "UB Finance · INV-2041" })
toast.success("Deployment finished")
toast.promise(save(), { loading: "Saving...", success: "Saved", error: "Couldn't save" })Guidelines
- Toasts confirm what just happened. Anything the user must act on goes in the page or a Dialog.
- Errors say what failed and what to do next, and stay until dismissed.
- Short: a title of a few words, an optional one-line description.
API reference
See the Sonner docs.