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 (
+ <>
+
+
+
+
+
+
+ >
+ );
+}
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`.
+
+
+
### Custom Styles
You can customize the alert by passing custom Tailwind CSS classes to the component slots.