diff --git a/data/primitives/docs/components/accordion/1.2.0.mdx b/data/primitives/docs/components/accordion/1.2.0.mdx
index 17c7ba03..1fbff041 100644
--- a/data/primitives/docs/components/accordion/1.2.0.mdx
+++ b/data/primitives/docs/components/accordion/1.2.0.mdx
@@ -558,6 +558,43 @@ export default () => (
 }
 ```
 
+#### Applying Animations in Non-Tailwind CSS Projects
+
+When working with CSS animations outside of Tailwind, it’s important to avoid conflicts with dynamic height calculations, especially in flex layouts. Instead of using height, you can use **max-height** for smoother animations and to prevent double rendering issues. Here’s how you can define the animations using **max-height**:
+
+```css
+/* styles.css */
+.AccordionContent {
+  overflow: hidden;
+}
+.AccordionContent[data-state='open'] {
+  animation: slideDown 300ms ease-out;
+}
+.AccordionContent[data-state='closed'] {
+  animation: slideUp 300ms ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    __max-height__: 0;
+  }
+  to {
+    __max-height__: var(__--radix-accordion-content-height__);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    __max-height__: var(__--radix-accordion-content-height__);
+  }
+  to {
+    __max-height__: 0;
+  }
+}
+```
+
+Using **max-height** ensures that the animation doesn’t conflict with the automatic height calculations performed by flex layouts, leading to smoother transitions without layout recalculation issues.
+
 ## Accessibility
 
 Adheres to the [Accordion WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion).
diff --git a/data/primitives/docs/components/collapsible/1.1.0.mdx b/data/primitives/docs/components/collapsible/1.1.0.mdx
index 520ce979..1bbe2c51 100644
--- a/data/primitives/docs/components/collapsible/1.1.0.mdx
+++ b/data/primitives/docs/components/collapsible/1.1.0.mdx
@@ -264,6 +264,43 @@ export default () => (
 }
 ```
 
+#### Applying Animations in Non-Tailwind CSS Projects
+
+When working with CSS animations outside of Tailwind, it’s important to avoid conflicts with dynamic height calculations, especially in flex layouts. Instead of using height, you can use **max-height** for smoother animations and to prevent double rendering issues. Here’s how you can define the animations using **max-height**:
+
+```css
+/* styles.css */
+.AccordionContent {
+  overflow: hidden;
+}
+.AccordionContent[data-state='open'] {
+  animation: slideDown 300ms ease-out;
+}
+.AccordionContent[data-state='closed'] {
+  animation: slideUp 300ms ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    __max-height__: 0;
+  }
+  to {
+    __max-height__: var(__--radix-accordion-content-height__);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    __max-height__: var(__--radix-accordion-content-height__);
+  }
+  to {
+    __max-height__: 0;
+  }
+}
+```
+
+Using **max-height** ensures that the animation doesn’t conflict with the automatic height calculations performed by flex layouts, leading to smoother transitions without layout recalculation issues.
+
 ## Accessibility
 
 Adheres to the [Disclosure WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure).