diff --git a/assets/docs/components/collapsible.md b/assets/docs/components/collapsible.md
index 295308fd..a2095b72 100644
--- a/assets/docs/components/collapsible.md
+++ b/assets/docs/components/collapsible.md
@@ -28,7 +28,7 @@ from .core import PACKAGE_NAME, BaseUIComponent
 class ClassNames:
     ROOT = "flex flex-col justify-center text-secondary-12"
     TRIGGER = "group flex items-center gap-2"
-    PANEL = "flex h-[var(--collapsible-panel-height)] flex-col justify-end overflow-hidden text-sm data-[ending-style]:h-0 data-[starting-style]:h-0"
+    PANEL = "flex h-[var(--collapsible-panel-height)] flex-col justify-end overflow-hidden text-sm transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0"
 
 
 class CollapsibleBaseComponent(BaseUIComponent):
diff --git a/components/ui/collapsible.py b/components/ui/collapsible.py
index 54542493..503142b4 100644
--- a/components/ui/collapsible.py
+++ b/components/ui/collapsible.py
@@ -9,7 +9,7 @@
 class ClassNames:
     ROOT = "flex flex-col justify-center text-secondary-12"
     TRIGGER = "group flex items-center gap-2"
-    PANEL = "flex h-[var(--collapsible-panel-height)] flex-col justify-end overflow-hidden text-sm data-[ending-style]:h-0 data-[starting-style]:h-0"
+    PANEL = "flex h-[var(--collapsible-panel-height)] flex-col justify-end overflow-hidden text-sm transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0"
 
 
 class CollapsibleBaseComponent(BaseUIComponent):