Skip to main content
The toast component has been deprecated. Use the Sonner component instead for toast notifications.

​
Migration to Sonner

Sonner is the recommended replacement for the toast component. It provides a better user experience with more features and better animations.

​
Installation

npx shadcn@latest add sonner

​
Setup

Add the Toaster component to your root layout:
app/layout.tsx
import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

​
Usage

import { toast } from "sonner"

// Basic toast
toast("Event has been created.")

// Success toast
toast.success("Account created successfully.")

// Error toast
toast.error("Something went wrong.")

// With description
toast("Event has been created.", {
  description: "Monday, January 3rd at 6:00pm",
})

​
Examples

    ​
    Why Sonner?

    Sonner provides several advantages over the deprecated toast component:
    • Better animations and transitions
    • Built-in support for promise-based toasts
    • Action buttons and custom components
    • Keyboard accessibility
    • Position customization
    • Expandable toasts
    • Built-in theme support

    ​
    Learn More

    For complete documentation and advanced usage, visit:

    Build docs developers (and LLMs) love

    Get started for freeTalk to us