Sonner
Toast notifications using the Sonner library with theme-aware styling
Usage
First, add the Toaster to your root layout:
import { Toaster } from "@/components/ui/sonner"
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Toaster />
</body>
</html>
)
}Then trigger toasts anywhere in your app:
import { toast } from "sonner"
// Basic
toast("Document saved successfully")
// Variants
toast.success("Upload complete")
toast.error("Failed to process document")
toast.warning("This action cannot be undone")
// With description
toast.success("Document uploaded", {
description: "Processing will begin shortly.",
})The Toaster component applies theme-aware colors for success, error, and warning variants using CSS custom properties.
Install
npx shadcn add @bonsai/sonner