Sonner

Sonner is a highly opinionated yet flexible toast component designed specifically for React applications, providing a modern and customizable way to display notifications.

Docs

Understanding Sonner

Sonner is built and maintained by emilkowalski_.

Setting Up the Sonner Component

Execute the following command in your terminal:

npx shadcn@latest add sonner

Integrate the main Toaster component into your application's root layout:


export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  );
}

Implementing and Displaying Toasts

import { toast } from "sonner";

toast("Event has been created.");

Slider Switch