From 492acaf3a84178bad2709cd158ee1d06f5f60981 Mon Sep 17 00:00:00 2001
From: hassanzadeh-mj <hassanzadeh-mj@users.noreply.github.com>
Date: Sun, 23 Nov 2025 11:07:49 +0330
Subject: [PATCH] feat(toast): add example for disabling toast animations in
 documentation

- Add disable-animation example to docs
- Resolves duplicate toast and animation speed issues
- Fixes #5883
---
 .../toast/disable-animation.raw.jsx           | 24 +++++++++++++++++++
 .../components/toast/disable-animation.ts     | 10 ++++++++
 apps/docs/content/components/toast/index.ts   |  2 ++
 apps/docs/content/docs/components/toast.mdx   |  9 +++++++
 4 files changed, 45 insertions(+)
 create mode 100644 apps/docs/content/components/toast/disable-animation.raw.jsx
 create mode 100644 apps/docs/content/components/toast/disable-animation.ts

diff --git a/apps/docs/content/components/toast/disable-animation.raw.jsx b/apps/docs/content/components/toast/disable-animation.raw.jsx
new file mode 100644
index 0000000000..ca8efa2465
--- /dev/null
+++ b/apps/docs/content/components/toast/disable-animation.raw.jsx
@@ -0,0 +1,24 @@
+import {addToast, ToastProvider, Button} from "@heroui/react";
+
+export default function App() {
+  return (
+    <>
+      <div className="fixed z-[100]">
+        <ToastProvider disableAnimation={true} />
+      </div>
+      <div className="flex flex-wrap gap-2">
+        <Button
+          variant="flat"
+          onPress={() => {
+            addToast({
+              title: "Toast Title",
+              description: "Toast Displayed Successfully",
+            });
+          }}
+        >
+          Show Toast (No Animation)
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/apps/docs/content/components/toast/disable-animation.ts b/apps/docs/content/components/toast/disable-animation.ts
new file mode 100644
index 0000000000..72f95aed81
--- /dev/null
+++ b/apps/docs/content/components/toast/disable-animation.ts
@@ -0,0 +1,10 @@
+import App from "./disable-animation.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
+
diff --git a/apps/docs/content/components/toast/index.ts b/apps/docs/content/components/toast/index.ts
index 183dbe6181..5ac5236c4f 100644
--- a/apps/docs/content/components/toast/index.ts
+++ b/apps/docs/content/components/toast/index.ts
@@ -6,6 +6,7 @@ import placement from "./placement";
 import usage from "./usage";
 import customCloseIcon from "./custom-close-icon";
 import close from "./close";
+import disableAnimation from "./disable-animation";
 
 export const toastContent = {
   color,
@@ -16,4 +17,5 @@ export const toastContent = {
   placement,
   usage,
   customCloseIcon,
+  disableAnimation,
 };
diff --git a/apps/docs/content/docs/components/toast.mdx b/apps/docs/content/docs/components/toast.mdx
index 71f3929e87..bf7d543352 100644
--- a/apps/docs/content/docs/components/toast.mdx
+++ b/apps/docs/content/docs/components/toast.mdx
@@ -116,6 +116,15 @@ Toast comes with 6 color variants to convey different meanings.
     files={toastContent.close}
 />
 
+### Disable Animation
+
+You can disable animations for all toasts by setting `disableAnimation={true}` on the `ToastProvider`.
+
+<CodeDemo
+  title="Disable Animation"
+  files={toastContent.disableAnimation}
+/>
+
 ### Custom Styles
 
 You can customize the alert by passing custom Tailwind CSS classes to the component slots.