Getting Started

Sonner is an opinionated toast component for React. You can read more about why and how it was built here (opens in a new tab).

Install

pnpm i sonner

Add Toaster to your app

It can be placed anywhere, even in server components such as layout.tsx.

import { Toaster } from 'sonner';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  );
}

Render a toast

import { toast } from 'sonner';
 
function MyToast() {
  return (
    <button onClick={() => toast('This is a sonner toast')}>
      Render my toast
    </button>
  );
}

toast()