Toast

Installation#

1. Install the dependencies

   npm install next-themes sonner lucide-react

2. Copy the source into your project

   components/ui/sonner.tsx

   "use client"import { useTheme } from "next-themes"import { Toaster as Sonner, type ToasterProps } from "sonner"import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"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": "var(--popover)",          "--normal-text": "var(--popover-foreground)",          "--normal-border": "var(--border)",          "--border-radius": "var(--radius)",        } as React.CSSProperties      }      toastOptions={{        classNames: {          toast: "cn-toast",        },      }}      {...props}    />  )}export { Toaster }

3. Make sure the foundation is in place

   Components read their colors, radius and surfaces from the tokens in app/globals.css. See Theming.

Usage#

import { Toaster } from "@/components/ui/sonner"

Examples#