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()