Getting Started

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


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">
        <Toaster />

Render a toast

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