Toast

Toast notifications using Sonner with glass styling.

Installation

npx popcn add sonner

Setup

Add the Toaster component to your root layout.

import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

Basic Usage

Default Toast

With Description

Variants

Success

Error

Warning

Info

With Action

Action Button

Promise

Loading State

API

Prop	Type	Default	Description
toast(message)	function	-	Show a default toast
toast.success()	function	-	Show a success toast
toast.error()	function	-	Show an error toast
toast.promise()	function	-	Show a toast with loading/success/error states