diff --git a/src/components/ui/accordion/accordion-content.astro b/src/components/ui/accordion/accordion-content.astro
index e74c5f6e..07c4d247 100644
--- a/src/components/ui/accordion/accordion-content.astro
+++ b/src/components/ui/accordion/accordion-content.astro
@@ -14,7 +14,11 @@ const slot = await Astro.slots.render("default")
   slot?.trim().length > 0 && (
     <div
       data-slot="accordion-content"
-      class={cn("overflow-hidden text-sm", "pt-0 pb-4", className)}
+      class={cn(
+        "text-sm",
+        "pt-0 pb-4",
+        className
+      )}
       {...props}
     >
       <Fragment set:html={slot} />
diff --git a/src/components/ui/accordion/accordion-item.astro b/src/components/ui/accordion/accordion-item.astro
index 913a65ce..bb10155d 100644
--- a/src/components/ui/accordion/accordion-item.astro
+++ b/src/components/ui/accordion/accordion-item.astro
@@ -17,7 +17,17 @@ const slot = await Astro.slots.render("default")
   slot?.trim().length > 0 && (
     <details
       data-slot="accordion-item"
-      class={cn("border-b last:border-b-0", "group", className)}
+      class={cn(
+        "border-b last:border-b-0",
+        "group",
+        "details-content:h-0 open:details-content:h-auto",
+        "details-content:ease-out",
+        "details-content:duration-200",
+        "details-content:overflow-hidden",
+        "details-content:transition-discrete",
+        "details-content:transition-[height,content-visibility]",
+        className
+      )}
       open={open}
       {...props}
     >
@@ -25,3 +35,4 @@ const slot = await Astro.slots.render("default")
     </details>
   )
 }
+
diff --git a/src/components/ui/accordion/accordion.astro b/src/components/ui/accordion/accordion.astro
index 7bd62151..c7d44913 100644
--- a/src/components/ui/accordion/accordion.astro
+++ b/src/components/ui/accordion/accordion.astro
@@ -12,7 +12,11 @@ const slot = await Astro.slots.render("default")
 
 {
   slot?.trim().length > 0 && (
-    <div data-slot="accordion" class={cn("w-full", className)} {...props}>
+    <div
+      data-slot="accordion"
+      class={cn("w-full [interpolate-size:allow-keywords]", className)}
+      {...props}
+    >
       <Fragment set:html={slot} />
     </div>
   )