Sonner

An opinionated toast component for React.

Click the buttons below to trigger toast notifications.

Installation


npx shadcn@latest add @uipath/sonner

Add the <Toaster /> component to your app:


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

Usage


import { toast } from "sonner"


toast("Event has been created.")
 
toast.success("Success!")
toast.error("Error!")
toast.warning("Warning!")
toast.info("Info!")