Sonner
An opinionated toast component for React.
Installation
npx shadcn@latest add @uqudo/sonnerThe component wraps the sonner package and
reads the active theme from next-themes, so your app needs a ThemeProvider
from next-themes above the Toaster.
Usage
Mount the Toaster once, at the root of your app. It renders the toast
viewport and listens for every toast() call.
import { Toaster } from "@/components/uqudo/ui/sonner"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Toaster />
</body>
</html>
)
}Then fire toasts from anywhere with the toast function exported by sonner:
import { toast } from "sonner"
<Button
onClick={() =>
toast("Event has been created", {
description: "Sunday, December 03, 2023 at 9:00 AM",
action: {
label: "Undo",
onClick: () => console.log("Undo"),
},
})
}
>
Show toast
</Button>The demos on this page mount their own <Toaster /> because the docs layout
does not. In your app, mount it exactly once.
Examples
Types
toast.success, toast.info, toast.warning, toast.error and
toast.promise each render the matching lucide icon configured on the
Toaster. The example mounts a second Toaster with an id and routes its
toasts there with toasterId, so they do not also appear in the demo above.
API Reference
Toaster
Accepts every ToasterProps of sonner and passes them through. Props you set
override the defaults below.
Prop
Type
toast
Not part of this package. Import it from sonner; see the
sonner documentation for the full list of
options such as description, action, cancel, duration and id.