Sonner

1"use client";
2 
3import {
4  CircleCheckIcon,
5  InfoIcon,
6  Loader2Icon,
7  OctagonXIcon,
8  TriangleAlertIcon,
9} from "lucide-react";
10import { useTheme } from "next-themes";
11import { Toaster as Sonner, type ToasterProps } from "sonner";
12 
13const Toaster = ({ ...props }: ToasterProps) => {
14  const { theme = "system" } = useTheme();
15 
16  return (
17    <Sonner
18      theme={theme as ToasterProps["theme"]}
19      className="toaster group"
20      icons={{
21        success: <CircleCheckIcon className="size-4" />,
22        info: <InfoIcon className="size-4" />,
23        warning: <TriangleAlertIcon className="size-4" />,
24        error: <OctagonXIcon className="size-4" />,
25        loading: <Loader2Icon className="size-4 animate-spin" />,
26      }}
27      style={
28        {
29          "--normal-bg": "var(--popover)",
30          "--normal-text": "var(--popover-foreground)",
31          "--normal-border": "var(--border)",
32          "--border-radius": "var(--radius)",
33        } as React.CSSProperties
34      }
35      {...props}
36    />
37  );
38};
39 
40export { Toaster };