Toast

module.exports = { 
   theme: { 
     extend: { 
       keyframes: { 
        "slide-in-right": {
          "0%": { transform: "translateX(100%)", opacity: "0" },
          "100%": { transform: "translateX(0)", opacity: "1" },
        },
        "slide-in-left": {
          "0%": { transform: "translateX(-100%)", opacity: "0" },
          "100%": { transform: "translateX(0)", opacity: "1" },
        },
        "slide-out-right": {
          "0%": { transform: "translateX(0)", opacity: "1" },
          "100%": { transform: "translateX(100%)", opacity: "0" },
        },
        "slide-out-left": {
          "0%": { transform: "translateX(0)", opacity: "1" },
          "100%": { transform: "translateX(-100%)", opacity: "0" },
        }, 
      }, 
       animation: { 
        "slide-in-right": "slide-in-right 0.3s ease-out",
        "slide-in-left": "slide-in-left 0.3s ease-out",
        "slide-out-right": "slide-out-right 0.3s ease-in",
        "slide-out-left": "slide-out-left 0.3s ease-in", 
       }, 
     }, 
    }, 
    plugins: [
    function ({ addBase }: PluginAPI) {
      addBase({
        ".toast-base": {
          "touch-action": "none",
          "user-select": "none",
          "-webkit-user-select": "none",
        },
      });
    },
  ],
 };

//First, wrap your application with the ToastProvider:
import { ToastProvider } from "@/components/ui/toast";
 
function App() {
  return (
    <ToastProvider>
      <YourApp />
    </ToastProvider>
  );
}

import { useToast } from "@/components/ui/toast";
 
function MyComponent() {
  const { toast } = useToast();
  
  const showToast = () => {
    toast({
      title: "Success!",
      description: "Your action was completed successfully.",
      variant: "success",
    });
  };
  
  return (
    <button onClick={showToast}>
      Show Toast
    </button>
  );
}