Skip to main content
  • Location: sabo/src/components/ui/sonner.tsx

​
What is Sonner?

Sonner is a lightweight toast library for React. It renders brief, non-blocking notifications (success, info, warning, error, loading) that appear over your UI and disappear automatically. A single Toaster component mounts a portal target; you trigger toasts anywhere with toast.*(...). Our wrapper integrates theme (light/dark), icons, and CSS variables for consistent styling.

​
Setup (once at root)

sabo/src/app/layout.tsx
import { Toaster } from "@/components/ui/sonner";

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

​
Usage

import { toast } from "sonner";

toast.success("Saved");
toast.error("Something went wrong");