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>;
}