components

Sonner

Display non-intrusive notifications or alerts

Sonner

Installation

Install the following dependencies:

pnpm add sonner

Wrap your application with the Toaster component from sonner.

app/layout.tsx
import { Toaster } from "sonner"
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

Update the import paths as per your project structure.

Usage

Imports

/components/ui/sonner.tsx
import { toast } from "sonner"

Code

/components/ui/sonner.tsx
<Button
	variant="outline"
	onClick={() =>
		toast("Toast Title", {
			description: "Toast Description Message",
			action: {
				label: "Upgrade",
				onClick: () => console.log("Upgrade clicked!"),
			},
		})
	}>
	Show Toast
</Button>

Examples

Variant

Placement

Position

Sonner Expand