Try to add a close button to the sonner toasts.

packages/ui/src/components/shadcn/ui/sonner.tsx

@@ -8,7 +8,7 @@ import { StatusIcon } from './../../StatusIcon'
 
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
-const SonnerToaster = ({ ...props }: ToasterProps) => {
+const SonnerToaster = ({ toastOptions, ...props }: ToasterProps) => {
   const { theme = 'system' } = useTheme()
 
   return (
@@ -48,8 +48,23 @@ const SonnerToaster = ({ ...props }: ToasterProps) => {
             'group toast group-[.toaster]:!bg-warning-200 group-[.toaster]:!border-warning-500',
           error:
             'group toast group-[.toaster]:!bg-destructive-200 group-[.toaster]:!border-destructive-500',
+          closeButton: cn(
+            // unset all styles set from sonner
+            'relative order-last transform-none',
+            // make it similar to the existing react toast
+            'text-foreground/50 opacity-0 transition-opacity -mr-4 bg-transparent border-0 hover:!bg-transparent hover:border-transparent',
+            'hover:text-foreground group-hover:opacity-100',
+            'focus:outline-none focus:ring-2 focus: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',
+          ),
+          content: 'grow',
         },
+        closeButton: true,
+        duration: Infinity,
+        ...toastOptions,
       }}
+      cn={cn}
       {...props}
     />
   )