Components
Base Components
Toaster
Display ephemeral toast notifications using Sonner. Add the Toaster to your app, then trigger toasts with the toast function.
Example
Add the Toaster to your root layout once, then calltoast() from anywhere in your app.
Installation
Install the following dependencies:
npm install sonnernpm install next-themesnpm install lucide-reactCreate a sonner.tsx file and paste the following code into it.
"use client";import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon,} from "lucide-react";import { useTheme } from "next-themes";import { Toaster as Sonner, type ToasterProps } from "sonner";const Toaster = ({ ...props }: ToasterProps) => { const { theme = "system" } = useTheme(); return ( <Sonner theme={theme as ToasterProps["theme"]} className="toaster group" icons={{ success: <CircleCheckIcon className="size-4" />, info: <InfoIcon className="size-4" />, warning: <TriangleAlertIcon className="size-4" />, error: <OctagonXIcon className="size-4" />, loading: <Loader2Icon className="size-4 animate-spin" />, }} style={ { "--normal-bg": "#30313D", "--normal-text": "#ffffff", "--normal-border": "var(--border)", "--border-radius": "var(--radius)", } as React.CSSProperties } {...props} /> );};export { Toaster };Check the import paths to ensure they match your project setup.
Setup
Render the Toaster component in your root layout (e.g.app/layout.tsx) so toasts can appear across the app.
import { Toaster } from "@/components/ui/sonner";
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Toaster />
</body>
</html>
);
}Usage
Trigger toasts with thetoast function from Sonner:
import { toast } from "sonner";
toast("Event has been created.");Examples
Default
With description
Variants
The Toaster is configured with icons for success, error, warning, info, and loading. Use thetype option when calling toast.
With action
API Reference
Toaster
The Toaster component wraps Sonner and applies theme-aware styles and custom icons. It should be rendered once in your root layout. It accepts all Sonner Toaster props.No prop metadata found for component "Toaster".
toast()
Usetoast from "sonner" to show notifications. See Sonner's toast API for options such as description, action, type, duration, and id.
import { toast } from "sonner";
toast("Message");
toast.success("Success message");
toast.error("Error message");
toast.warning("Warning message");
toast.info("Info message");
toast.loading("Loading...");
toast("With options", { description: "...", action: { label: "Undo", onClick: () => {} } });