Use sonner for toasts

app/(marketing)/features.tsx

@@ -3,14 +3,12 @@
 import { CheckIcon } from "lucide-react"
 import Link from "next/link"
 import { useMemo } from "react"
+import { toast } from "sonner"
 
 import { Button } from "@/components/ui/button"
-import { useToast } from "@/components/ui/use-toast"
 import { cls } from "@/lib/utils"
 
 export function Features() {
-  const { toast } = useToast()
-
   const FEATURES = useMemo(
     () => [
       { title: "Next 14", href: "https://nextjs.org" },
@@ -41,14 +39,13 @@ export function Features() {
       {
         title: "Toasts",
         onClick: () =>
-          toast({
-            title: "Wait. Toasts, too?",
+          toast("Wait. Toasts, too?", {
             description: "Yep! You can use them anywhere in your app."
           })
       },
       { title: "and much more..." }
     ],
-    [toast]
+    []
   )
 
   return (

app/layout.tsx

@@ -6,7 +6,7 @@ import { type ReactNode } from "react"
 
 import { TailwindIndicator } from "@/components/debug/tailwind-indicator"
 import { Analytics } from "@/components/layout/analytics"
-import { Toaster } from "@/components/ui/toaster"
+import { Toaster } from "@/components/ui/sonner"
 import { siteConfig } from "@/config"
 import { cls, fullURL } from "@/lib/utils"
 

components/auth/user-auth-form.tsx

@@ -8,13 +8,13 @@ import { type SignInResponse } from "next-auth/react"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { type HTMLAttributes } from "react"
 import { useForm } from "react-hook-form"
+import { toast } from "sonner"
 import { type z } from "zod"
 
 import { Spinner } from "@/components/spinner"
 import { Button } from "@/components/ui/button"
 import { Form, FormControl, FormField, FormItem } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
-import { useToast } from "@/components/ui/use-toast"
 import { cls } from "@/lib/utils"
 import { userAuthSchema } from "@/lib/validations"
 
@@ -25,49 +25,43 @@ type FormData = z.infer<typeof userAuthSchema>
 /**
  * https://github.com/nextauthjs/next-auth/blob/a79774f6e890b492ae30201f24b3f7024d0d7c9d/docs/docs/guides/basics/pages.md?plain=1#L42
  */
-function parseErrorMessage(error?: string | null) {
+function handleError(error?: string | null) {
   switch (error) {
     case "OAuthAccountNotLinked":
-      return {
-        title: "You already have an account",
+      return toast("You already have an account", {
         description:
           "Please sign in with the other service you used to sign up."
-      }
+      })
     case "EmailSignin":
-      return {
-        title: "Unable to send login e-mail",
+      return toast("Unable to send login e-mail", {
         description: "Sending your login e-mail failed. Please try again."
-      }
+      })
     case "CredentialsSignin":
-      return {
-        title: "Invalid username or password",
+      return toast("Invalid username or password", {
         description:
           "The username and password you entered did not match our records. Please double-check and try again."
-      }
+      })
     case "SessionRequired":
-      return {
-        title: "Login required",
+      return toast("Login required", {
         description: "You must be logged in to view this page"
-      }
+      })
     case "OAuthCallback":
     case "OAuthCreateAccount":
     case "OAuthSignin":
     case "EmailCreateAccount":
     case "Callback":
     case "Default":
     default:
-      return {
-        title: "Something went wrong.",
+      return toast("Something went wrong.", {
         description: "Your sign in request failed. Please try again."
-      }
+      })
   }
 }
 
 type Props = HTMLAttributes<HTMLDivElement>
 
 export function UserAuthForm({ className, ...props }: Props) {
   const searchParams = useSearchParams()
-  const { toast } = useToast()
   const form = useForm<z.infer<typeof userAuthSchema>>({
     resolver: zodResolver(userAuthSchema),
     defaultValues: {
@@ -88,12 +82,9 @@ export function UserAuthForm({ className, ...props }: Props) {
    */
   useEffect(() => {
     if (searchParams.get("error")) {
-      toast({
-        ...parseErrorMessage(searchParams.get("error")),
-        variant: "destructive"
-      })
+      handleError(searchParams.get("error"))
     }
-  }, [searchParams, toast])
+  }, [searchParams])
 
   /**
    * Handle the form submission.
@@ -118,18 +109,14 @@ export function UserAuthForm({ className, ...props }: Props) {
       }
 
       if (!signInResult?.ok || signInResult.error) {
-        return toast({
-          ...parseErrorMessage(signInResult?.error),
-          variant: "destructive"
-        })
+        return handleError(signInResult?.error)
       }
 
-      return toast({
-        title: "Check your email",
+      return toast("Check your email", {
         description: "We sent you a login link. Be sure to check your spam too."
       })
     },
-    [isLoading, searchParams, toast]
+    [isLoading, searchParams]
   )
 
   return (

components/ui/sonner.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+function Toaster({ ...props }: ToasterProps) {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      // eslint-disable-next-line tailwindcss/no-custom-classname -- needed for sonner
+      className="toaster group"
+      theme={theme as ToasterProps["theme"]}
+      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 }