diff --git a/src/runtime/components/Collapsible.vue b/src/runtime/components/Collapsible.vue
index be48c40d..94fca206 100644
--- a/src/runtime/components/Collapsible.vue
+++ b/src/runtime/components/Collapsible.vue
@@ -32,13 +32,13 @@ const props = defineProps<CollapsibleProps>()
 const emits = defineEmits<CollapsibleEmits>()
 defineSlots<CollapsibleSlots>()
 
-const forward = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled'), emits)
 
 const ui = computed(() => tv({ extend: collapsible, slots: props.ui })())
 </script>
 
 <template>
-  <CollapsibleRoot v-bind="forward" :class="ui.root({ class: props.class })">
+  <CollapsibleRoot v-bind="rootProps" :class="ui.root({ class: props.class })">
     <CollapsibleTrigger as-child>
       <slot />
     </CollapsibleTrigger>
@@ -52,7 +52,7 @@ const ui = computed(() => tv({ extend: collapsible, slots: props.ui })())
 </template>
 
 <style>
-@keyframes collapsibleSlideDown {
+@keyframes collapsible-down {
   from {
     height: 0;
   }
@@ -61,7 +61,7 @@ const ui = computed(() => tv({ extend: collapsible, slots: props.ui })())
   }
 }
 
-@keyframes collapsibleSlideUp {
+@keyframes collapsible-up {
   from {
     height: var(--radix-collapsible-content-height);
   }
diff --git a/src/theme/collapsible.ts b/src/theme/collapsible.ts
index af2bcfcb..e93739b9 100644
--- a/src/theme/collapsible.ts
+++ b/src/theme/collapsible.ts
@@ -1,6 +1,6 @@
 export default {
   slots: {
     root: '',
-    content: 'data-[state=open]:animate-[collapsibleSlideDown_200ms_ease-out] data-[state=closed]:animate-[collapsibleSlideUp_200ms_ease-out] overflow-hidden'
+    content: 'data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden'
   }
 }
\ No newline at end of file