diff --git a/docs-templates/toast.md b/docs-templates/toast.md
index db06fc84f..039632fe4 100644
--- a/docs-templates/toast.md
+++ b/docs-templates/toast.md
@@ -10,6 +10,31 @@ the
 
 <!-- IMPORT_EXAMPLE src/toast/stories/__js/ToastBasic.component.jsx -->
 
+We can utilize the `toastWrapper` prop to add animations and other wrappers
+around the toast.
+
+Example:
+
+```jsx
+<ToastProvider
+  animationTimeout={500}
+  toastWrapper={({ id, isVisible, children }) => (
+    <CSSTransition className="fadeIn" in={isVisible} timeout={500}>
+      {children}
+    </CSSTransition>
+  )}
+  toastTypes={{
+    primary: ({ content }) => <span>{content}</span>,
+  }}
+>
+  <ToastTriggers />
+</ToastProvider>
+```
+
+We also have to add the `animationTimeout` inorder to specify a delay before
+removing the toast from the state, this would ensure the CSS or any other
+animations has the chance to finish without being interrupted.
+
 <!-- CODESANDBOX
 link_title: Toast Basic - Open On Sandbox
 js: src/toast/stories/__js/ToastBasic.component.jsx
diff --git a/docs/toast.md b/docs/toast.md
index c649fde84..69b540eaf 100644
--- a/docs/toast.md
+++ b/docs/toast.md
@@ -76,6 +76,31 @@ const ToastTriggers = () => {
 };
 ```
 
+We can utilize the `toastWrapper` prop to add animations and other wrappers
+around the toast.
+
+Example:
+
+```jsx
+<ToastProvider
+  animationTimeout={500}
+  toastWrapper={({ id, isVisible, children }) => (
+    <CSSTransition className="fadeIn" in={isVisible} timeout={500}>
+      {children}
+    </CSSTransition>
+  )}
+  toastTypes={{
+    primary: ({ content }) => <span>{content}</span>,
+  }}
+>
+  <ToastTriggers />
+</ToastProvider>
+```
+
+We also have to add the `animationTimeout` inorder to specify a delay before
+removing the toast from the state, this would ensure the CSS or any other
+animations has the chance to finish without being interrupted.
+
 [Toast Basic - Open On Sandbox](https://codesandbox.io/s/2z7hj)
 
 [Toast Styled - Open On Sandbox](https://codesandbox.io/s/k9rki)