From 7d76b12acbb45e79cadd167826accdb0ff3d7102 Mon Sep 17 00:00:00 2001
From: Jaleel Bennett <jaleelbennett58@gmail.com>
Date: Fri, 2 Aug 2024 09:45:38 -0400
Subject: [PATCH] feat(ui): sonner toast implementation

---
 app/(auth)/forgot-password/page.tsx           |  10 +-
 app/(auth)/signin/page.tsx                    |  18 +--
 app/(auth)/signup/page.tsx                    |  13 +-
 app/bookmarks/components/bookmark-list.tsx    |  18 +--
 .../components/bookmarks-display.tsx          |  11 +-
 .../components/create-bookmark-form.tsx       |  32 +----
 app/history/history-list.tsx                  |  22 +--
 app/layout.tsx                                |   5 +-
 components/article.tsx                        |  36 ++---
 components/ui/alert-dialog.tsx                |   2 +-
 components/ui/sonner.tsx                      |  31 +++++
 components/ui/toast.tsx                       | 129 ------------------
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |  50 ++-----
 14 files changed, 89 insertions(+), 290 deletions(-)
 create mode 100644 components/ui/sonner.tsx
 delete mode 100644 components/ui/toast.tsx

diff --git a/app/(auth)/forgot-password/page.tsx b/app/(auth)/forgot-password/page.tsx
index 63f5eb8..75c3296 100644
--- a/app/(auth)/forgot-password/page.tsx
+++ b/app/(auth)/forgot-password/page.tsx
@@ -17,29 +17,23 @@ import { Terminal } from "lucide-react";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { useServerAction } from "zsa-react";
 import { LoaderButton } from "@/components/loader-button";
-import { useToast } from "@/components/ui/use-toast";
 import { resetPasswordAction } from "./actions";
 import Balancer from "react-wrap-balancer";
 import Link from "next/link";
 import { Icons } from "@/components/icons";
 import { SparkleBg } from "@/components/sparkle-bg";
+import { toast } from "sonner";
 
 const registrationSchema = z.object({
   email: z.string().email(),
 });
 
 export default function ForgotPasswordPage() {
-  const { toast } = useToast();
-
   const { execute, isPending, isSuccess } = useServerAction(
     resetPasswordAction,
     {
       onError({ err }) {
-        toast({
-          title: "Something went wrong",
-          description: err.message,
-          variant: "destructive",
-        });
+        toast.error(err.message);
       },
     },
   );
diff --git a/app/(auth)/signin/page.tsx b/app/(auth)/signin/page.tsx
index 8483a7d..09d6dd3 100644
--- a/app/(auth)/signin/page.tsx
+++ b/app/(auth)/signin/page.tsx
@@ -1,8 +1,6 @@
 "use client";
 
 import { z } from "zod";
-
-import { buttonVariants } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
@@ -14,10 +12,8 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { cn } from "@/lib/utils";
 import { useServerAction } from "zsa-react";
 import Link from "next/link";
-import { useToast } from "@/components/ui/use-toast";
 import { signInAction } from "./actions";
 import { LoaderButton } from "@/components/loader-button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
@@ -27,6 +23,7 @@ import { Separator } from "@/components/ui/separator";
 import Balancer from "react-wrap-balancer";
 import { SparkleBg } from "@/components/sparkle-bg";
 import { OAuthButton } from "@/components/oauth-button";
+import { toast } from "sonner";
 
 const registrationSchema = z.object({
   email: z.string().email(),
@@ -34,21 +31,12 @@ const registrationSchema = z.object({
 });
 
 export default function SignInPage() {
-  const { toast } = useToast();
-
   const { execute, isPending, error, reset } = useServerAction(signInAction, {
     onError({ err }) {
-      toast({
-        title: "Something went wrong",
-        description: err.message,
-        variant: "destructive",
-      });
+      toast.error(err.message);
     },
     onSuccess() {
-      toast({
-        title: "Let's Go!",
-        description: "Enjoy your session",
-      });
+      toast.success("You're in! Enjoy your session");
     },
   });
 
diff --git a/app/(auth)/signup/page.tsx b/app/(auth)/signup/page.tsx
index c5fee49..487f4aa 100644
--- a/app/(auth)/signup/page.tsx
+++ b/app/(auth)/signup/page.tsx
@@ -16,7 +16,6 @@ import {
 import { useServerAction } from "zsa-react";
 import { signUpAction } from "./actions";
 import { LoaderButton } from "@/components/loader-button";
-import { useToast } from "@/components/ui/use-toast";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Terminal } from "lucide-react";
 import { Icons } from "@/components/icons";
@@ -25,6 +24,7 @@ import Link from "next/link";
 import Balancer from "react-wrap-balancer";
 import { SparkleBg } from "@/components/sparkle-bg";
 import { OAuthButton } from "@/components/oauth-button";
+import { toast } from "sonner";
 
 const registrationSchema = z
   .object({
@@ -38,15 +38,12 @@ const registrationSchema = z
   });
 
 export default function RegisterPage() {
-  const { toast } = useToast();
-
   const { execute, isPending, error } = useServerAction(signUpAction, {
     onError({ err }) {
-      toast({
-        title: "Something went wrong",
-        description: err.message,
-        variant: "destructive",
-      });
+      toast.error(err.message);
+    },
+    onSuccess() {
+      toast.success("You're in! Enjoy your session");
     },
   });
 
diff --git a/app/bookmarks/components/bookmark-list.tsx b/app/bookmarks/components/bookmark-list.tsx
index b3dca0d..242d28a 100644
--- a/app/bookmarks/components/bookmark-list.tsx
+++ b/app/bookmarks/components/bookmark-list.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { useToast } from "@/components/ui/use-toast";
 import { Card, CardContent, CardDescription } from "@/components/ui/card";
 import Balancer from "react-wrap-balancer";
 import { deleteBookmarkAction } from "../bookmark";
@@ -29,6 +28,7 @@ import { BookmarksSearchBox } from "./bookmarks-search-box";
 import { BookmarksDisplayMenu } from "./bookmarks-display";
 import { BookmarkButton } from "./bookmark-button";
 import Image from "next/image";
+import { toast } from "sonner";
 
 export type Layout = "grid" | "rows";
 export type OrderBy = "date" | "readTime" | "title";
@@ -56,8 +56,6 @@ export default function BookmarksList({
   bookmarks: Bookmark[];
   userId: number;
 }) {
-  const { toast } = useToast();
-
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -203,19 +201,13 @@ export default function BookmarksList({
                             });
 
                             if (error) {
-                              toast({
-                                title: "Error",
-                                description: "Failed to delete bookmark",
-                                variant: "destructive",
-                              });
+                              toast.error("Failed to delete bookmark");
                               return;
                             }
 
-                            toast({
-                              title: "Bookmark deleted",
-                              description:
-                                "Bookmark has been successfully deleted",
-                            });
+                            toast.success(
+                              "Bookmark has been successfully deleted",
+                            );
                           }}
                         >
                           Continue
diff --git a/app/bookmarks/components/bookmarks-display.tsx b/app/bookmarks/components/bookmarks-display.tsx
index 7f275cd..d1d70c0 100644
--- a/app/bookmarks/components/bookmarks-display.tsx
+++ b/app/bookmarks/components/bookmarks-display.tsx
@@ -17,7 +17,7 @@ import {
 import { cn } from "@/lib/utils";
 import { Dispatch, SetStateAction, useState } from "react";
 import { Layout, OrderBy } from "./bookmark-list";
-import { useToast } from "@/components/ui/use-toast";
+import { toast } from "sonner";
 
 export function BookmarksDisplayMenu({
   layout,
@@ -32,20 +32,15 @@ export function BookmarksDisplayMenu({
 }) {
   const [open, setOpen] = useState(false);
   const [openPopover, setOpenPopover] = useState(false);
-  const { toast } = useToast();
 
   const handleSetDefault = () => {
-    toast({
-      description: "Your current display settings have been set as default.",
-    });
+    toast.info("Your current display settings have been set as default.");
   };
 
   const handleResetToDefaults = () => {
     setLayout("grid");
     setOrderBy("date");
-    toast({
-      description: "Display settings have been reset to defaults.",
-    });
+    toast.info("Display settings have been reset to defaults.");
   };
 
   return (
diff --git a/app/bookmarks/components/create-bookmark-form.tsx b/app/bookmarks/components/create-bookmark-form.tsx
index a862dab..7b1522e 100644
--- a/app/bookmarks/components/create-bookmark-form.tsx
+++ b/app/bookmarks/components/create-bookmark-form.tsx
@@ -9,7 +9,7 @@ import {
   getUrlWithoutPaywall,
   validateMediumArticle,
 } from "@/app/article/actions/url";
-import { useToast } from "@/components/ui/use-toast";
+import { toast } from "sonner";
 import { z } from "zod";
 import {
   Form,
@@ -32,16 +32,11 @@ const bookmarkSchema = z.object({
 });
 
 export function CreateBookmarkForm() {
-  const { toast } = useToast();
   const { user } = useAuth();
 
   const { execute } = useServerAction(createBookmarkAction, {
     onError({ err }) {
-      toast({
-        title: "Something went wrong",
-        description: err.message,
-        variant: "destructive",
-      });
+      toast.error(err.message);
     },
   });
 
@@ -79,9 +74,7 @@ export function CreateBookmarkForm() {
   async function onSubmit(values: z.infer<typeof bookmarkSchema>) {
     values.url = values.url.trim();
 
-    toast({
-      title: `Creating reating bookmark...`,
-    });
+    toast.loading("Creating bookmark...");
 
     const isValidMedium = await validateMediumArticle(values.url);
     if (!isValidMedium) {
@@ -89,10 +82,7 @@ export function CreateBookmarkForm() {
         type: "manual",
         message: "The URL is not a valid Medium article.",
       });
-      toast({
-        description: "This URL is not a valid Medium article.",
-        variant: "destructive",
-      });
+      toast.error("This URL is not a valid Medium article.");
       return;
     }
 
@@ -102,22 +92,16 @@ export function CreateBookmarkForm() {
         type: "manual",
         message: "Failed to get article content",
       });
-      toast({
-        description: "Failed to get article content.",
-        variant: "destructive",
-      });
+      toast.error("Failed to get article content.");
       return;
     }
 
     if (!user) {
-      toast({
-        description: "You need to sign in to create a bookmark.",
-        variant: "destructive",
-      });
       form.setError("url", {
         type: "manual",
         message: "You need to sign in to create a bookmark.",
       });
+      toast.error("You need to sign in to create a bookmark.");
       return;
     }
 
@@ -139,9 +123,7 @@ export function CreateBookmarkForm() {
 
     execute(bookmarkContent);
 
-    toast({
-      description: "Bookmark has been successfully created.",
-    });
+    toast.success("Bookmark has been successfully created.");
   }
 
   return (
diff --git a/app/history/history-list.tsx b/app/history/history-list.tsx
index 1945205..ecf8c4b 100644
--- a/app/history/history-list.tsx
+++ b/app/history/history-list.tsx
@@ -19,7 +19,7 @@ import {
   deleteAllReadingHistoryAction,
   deleteReadingHistoryByIdAction,
 } from "./history";
-import { useToast } from "@/components/ui/use-toast";
+import { toast } from "sonner";
 import { useServerAction } from "zsa-react";
 import { LoaderButton } from "@/components/loader-button";
 import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
@@ -43,7 +43,6 @@ export type ReadingHistory = {
 
 export function HistoryList({ historyLog }: { historyLog: ReadingHistory[] }) {
   const id = uuidv4();
-  const { toast } = useToast();
 
   // Pagination
   const [currentPage, setCurrentPage] = useState(1);
@@ -71,16 +70,10 @@ export function HistoryList({ historyLog }: { historyLog: ReadingHistory[] }) {
     reset: deleteByIdReset,
   } = useServerAction(deleteReadingHistoryByIdAction, {
     onError({ err }) {
-      toast({
-        title: "Something went wrong",
-        description: err.message,
-        variant: "destructive",
-      });
+      toast.error(err.message);
     },
     onSuccess() {
-      toast({
-        description: "Successfully deleted reading history log",
-      });
+      toast.success("Successfully deleted reading history log");
     },
   });
 
@@ -91,15 +84,10 @@ export function HistoryList({ historyLog }: { historyLog: ReadingHistory[] }) {
     reset: deleteAllLogsReset,
   } = useServerAction(deleteAllReadingHistoryAction, {
     onError({ err }) {
-      toast({
-        description: err.message,
-        variant: "destructive",
-      });
+      toast.error(err.message);
     },
     onSuccess() {
-      toast({
-        description: "Successfully deleted reading history logs",
-      });
+      toast.success("Successfully deleted all reading history logs");
     },
   });
 
diff --git a/app/layout.tsx b/app/layout.tsx
index 16d3bbe..84234b9 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,10 +3,11 @@ import { cn } from "@/lib/utils";
 import { fontHeading, fontMono, fontSans } from "@/lib/fonts";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
-import { Toaster } from "@/components/ui/toaster";
+// import { Toaster } from "@/components/ui/toaster";
 import { siteConfig } from "@/app-config";
 import Script from "next/script";
 import type { Viewport } from "next";
+import { Toaster } from "@/components/ui/sonner";
 
 export const viewport: Viewport = {
   themeColor: [
@@ -96,7 +97,7 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           {children}
-          <Toaster />
+          <Toaster richColors />
         </ThemeProvider>
         <Script
           async
diff --git a/components/article.tsx b/components/article.tsx
index 5b5dec0..caea4bf 100644
--- a/components/article.tsx
+++ b/components/article.tsx
@@ -15,7 +15,7 @@ import {
   getBookmarkAction,
 } from "@/app/bookmarks/bookmark";
 import { generateRandomName } from "@/lib/names";
-import { useToast } from "./ui/use-toast";
+import { toast } from "sonner";
 import { usePathname, useRouter } from "next/navigation";
 import { useReadingProgress } from "@/hooks/use-reading-progress";
 import { useCallback, useEffect, useState } from "react";
@@ -70,9 +70,7 @@ export function Article({
     ],
   });
 
-  const { toast } = useToast();
   const pathname = usePathname();
-  const router = useRouter();
   const [isBookmarked, setIsBookmarked] = useState<boolean>(false);
   const [bookmarkId, setBookmarkId] = useState<number | null>(null);
   const [initialProgress, setInitialProgress] = useState<number>(0);
@@ -88,10 +86,7 @@ export function Article({
         readingHistoryId,
       }).then(([progress, error]) => {
         if (error) {
-          toast({
-            description: "Failed to retrieve reading progress from database",
-            variant: "destructive",
-          });
+          toast.error("Failed to retrieve reading progress from database");
           return;
         }
         if (progress) {
@@ -100,7 +95,7 @@ export function Article({
         }
       });
     }
-  }, [readingHistoryId, user.id, toast]);
+  }, [readingHistoryId, user.id]);
 
   const { progress, articleRef } = useReadingProgress(initialProgress);
 
@@ -120,12 +115,9 @@ export function Article({
     });
 
     if (error) {
-      toast({
-        description: "Failed to save reading progress",
-        variant: "destructive",
-      });
+      toast.error("Failed to save reading progress");
     }
-  }, [progress, readingHistoryId, toast, user.id]);
+  }, [progress, readingHistoryId, user.id]);
 
   useEffect(() => {
     const fetchBookmarkStatus = async () => {
@@ -244,16 +236,11 @@ export function Article({
                   });
 
                   if (err) {
-                    toast({
-                      description: "Failed to bookmark article",
-                      variant: "destructive",
-                    });
+                    toast.error("Failed to bookmark article");
                     return;
                   }
 
-                  toast({
-                    description: "Article bookmarked successfully",
-                  });
+                  toast.success("Article bookmarked");
 
                   window.location.reload();
                 } else {
@@ -264,16 +251,11 @@ export function Article({
                   });
 
                   if (err) {
-                    toast({
-                      description: "Failed to remove bookmark",
-                      variant: "destructive",
-                    });
+                    toast.error("Failed to remove bookmark");
                     return;
                   }
 
-                  toast({
-                    description: "Bookmark removed",
-                  });
+                  toast.success("Bookmark removed");
                   // window.location.reload();
                 }
               }}
diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx
index f69596f..8f18aad 100644
--- a/components/ui/alert-dialog.tsx
+++ b/components/ui/alert-dialog.tsx
@@ -18,7 +18,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-white/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-black/40",
       className,
     )}
     {...props}
diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx
new file mode 100644
index 0000000..452f4d9
--- /dev/null
+++ b/components/ui/sonner.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
deleted file mode 100644
index 0b671b7..0000000
--- a/components/ui/toast.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as ToastPrimitives from "@radix-ui/react-toast";
-import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const ToastProvider = ToastPrimitives.Provider;
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className,
-    )}
-    {...props}
-  />
-));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-
-const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  );
-});
-Toast.displayName = ToastPrimitives.Root.displayName;
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className,
-    )}
-    {...props}
-  />
-));
-ToastAction.displayName = ToastPrimitives.Action.displayName;
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className,
-    )}
-    toast-close=""
-    {...props}
-  >
-    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
-));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold", className)}
-    {...props}
-  />
-));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn("text-sm opacity-90", className)}
-    {...props}
-  />
-));
-ToastDescription.displayName = ToastPrimitives.Description.displayName;
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>;
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-};
diff --git a/package.json b/package.json
index 19b7dcb..cd63084 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,6 @@
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-toast": "^1.2.1",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@react-email/components": "^0.0.20",
     "@t3-oss/env-nextjs": "^0.10.1",
@@ -65,6 +64,7 @@
     "react-hook-form": "^7.52.0",
     "react-wrap-balancer": "^1.1.1",
     "resend": "^3.4.0",
+    "sonner": "^1.5.0",
     "swr": "^2.2.5",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index adf155b..48682bf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,9 +50,6 @@ importers:
       '@radix-ui/react-slot':
         specifier: ^1.1.0
         version: 1.1.0(@types/react@18.3.3)(react@18.3.1)
-      '@radix-ui/react-toast':
-        specifier: ^1.2.1
-        version: 1.2.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-tooltip':
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -143,6 +140,9 @@ importers:
       resend:
         specifier: ^3.4.0
         version: 3.4.0
+      sonner:
+        specifier: ^1.5.0
+        version: 1.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       swr:
         specifier: ^2.2.5
         version: 2.2.5(react@18.3.1)
@@ -1780,19 +1780,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-toast@1.2.1':
-    resolution: {integrity: sha512-5trl7piMXcZiCq7MW6r8YYmu0bK5qDpTWz+FdEPdKyft2UixkspheYbjbrLXVN5NGKHFbOP7lm8eD0biiSqZqg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-toggle-group@1.1.0':
     resolution: {integrity: sha512-PpTJV68dZU2oqqgq75Uzto5o/XfOVgkrJ9rulVmfTKxWp3HfUjHE6CP/WLRR4AzPX9HWxw7vFow2me85Yu+Naw==}
     peerDependencies:
@@ -4729,6 +4716,12 @@ packages:
       react: ^18.0.0
       react-dom: ^18.0.0
 
+  sonner@1.5.0:
+    resolution: {integrity: sha512-FBjhG/gnnbN6FY0jaNnqZOMmB73R+5IiyYAw8yBj7L54ER7HB3fOSE5OFiQiE2iXWxeXKvg6fIP4LtVppHEdJA==}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+
   source-map-js@1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
@@ -6688,26 +6681,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
-  '@radix-ui/react-toast@1.2.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.3)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.3)(react@18.3.1)
-      '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.3
-      '@types/react-dom': 18.3.0
-
   '@radix-ui/react-toggle-group@1.1.0(@types/react-dom@18.3.0)(@types/react@18.2.47)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.0
@@ -10103,6 +10076,11 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
+  sonner@1.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   source-map-js@1.0.2: {}
 
   source-map-js@1.2.0: {}