sonner

1"use client"
2 
3import { useTheme } from "next-themes"
4import { Toaster as Sonner, ToasterProps } from "sonner"
5 
6const Toaster = ({ ...props }: ToasterProps) => {
7  const { theme = "system" } = useTheme()
8 
9  return (
10    <Sonner
11      theme={theme as ToasterProps["theme"]}
12      className="toaster group"
13      toastOptions={{
14        classNames: {
15          toast:
16            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
17          description: "group-[.toast]:text-muted-foreground",
18          actionButton:
19            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground font-medium",
20          cancelButton:
21            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground font-medium",
22        },
23      }}
24      {...props}
25    />
26  )
27}
28 
29export { Toaster }