Sonner (Toast)

Lightweight toast notifications powered by Sonner.

Installation

bash
npx shadcn@latest add sonner

Setup

Add the <Toaster /> component once in your root layout.

// app/layout.tsximport { Toaster } from "@/components/ui/sonner"export default function RootLayout({ children }) {  return (    <html lang="en">      <body>        {children}        <Toaster />      </body>    </html>  )}

Import

import { toast } from "sonner"

Variants

<Button onClick={() => toast("Event has been created")}>Show Toast</Button><Button onClick={() => toast.success("Profile updated")}>Success</Button><Button onClick={() => toast.error("Something went wrong")}>Error</Button><Button onClick={() => toast.warning("Check your input")}>Warning</Button>

Promise

<Button  onClick={() =>    toast.promise(saveSettings(), {      loading: "Saving...",      success: "Saved!",      error: "Error saving",    })  }>  Promise</Button>

With Description

toast("Event created", {  description: "Monday, January 3rd at 6:00pm",})

With Action

toast("File deleted", {  action: {    label: "Undo",    onClick: () => restoreFile(),  },})

Note

Sonner replaces the legacy Toast component. Use Sonner for all new work.