HeyBinyang
← Back to open source
·UI·UIReactToast

Sonner

Website ↗GitHub

An opinionated toast component for React.

Quick Start

Sonner is a React toast component. You canhere learn how it's built.

Installation

Install this component from the command line.

Terminal

pnpm i sonner

Add Toaster to Your Application

It can be placed anywhere, even inside server components like layout.tsx.

layout.tsx

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

Rendering a Toast

See all options in the toast page.

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

Share

XRedditFacebookInstagramLinkedIn