> ## Documentation Index > Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt > Use this file to discover all available pages before exploring further. # Toast (Sonner) > Non-blocking notifications using Sonner. * **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) ```tsx sabo/src/app/layout.tsx theme={null} import { Toaster } from "@/components/ui/sonner"; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` ## Usage ```tsx theme={null} import { toast } from "sonner"; toast.success("Saved"); toast.error("Something went wrong"); ```