Toast - shadcn/ui

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

yarn dlx shadcn@latest add sonner

pnpm dlx shadcn@latest add sonner

bunx 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:

⌘I

​Migration to Sonner

​Installation

​Setup

​Usage

​Examples

​Why Sonner?

​Learn More

Migration to Sonner

Installation

Setup

Usage

Examples

Why Sonner?

Learn More