jaydip.me
1import { useTheme } from "next-themes"
2import { Toaster as Sonner, toast } from "sonner"
3
4type ToasterProps = React.ComponentProps<typeof 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",
20 cancelButton:
21 "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
22 },
23 }}
24 {...props}
25 />
26 )
27}
28
29export { Toaster, toast }