diff --git a/playground/app/pages/components/collapsible.vue b/playground/app/pages/components/collapsible.vue
index d92b381d..b345fa22 100644
--- a/playground/app/pages/components/collapsible.vue
+++ b/playground/app/pages/components/collapsible.vue
@@ -4,7 +4,7 @@ const appConfig = useAppConfig()
 
 <template>
   <div class="flex-1">
-    <UCollapsible class="space-y-2 w-48">
+    <UCollapsible class="w-48">
       <UButton
         class="group"
         icon="i-heroicons-light-bulb"
diff --git a/src/theme/collapsible.ts b/src/theme/collapsible.ts
index 9fb6b589..7c42c318 100644
--- a/src/theme/collapsible.ts
+++ b/src/theme/collapsible.ts
@@ -1,6 +1,6 @@
 export default {
   slots: {
-    root: '',
+    root: 'flex flex-col gap-2',
     content: 'data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden'
   }
 }
diff --git a/test/components/Collapsible.spec.ts b/test/components/Collapsible.spec.ts
index 42436a76..b9432ed0 100644
--- a/test/components/Collapsible.spec.ts
+++ b/test/components/Collapsible.spec.ts
@@ -8,7 +8,7 @@ describe('Collapsible', () => {
   it.each([
     // Props
     ['with open', { props }],
-    ['with class', { props: { ...props, class: 'space-y-2' } }],
+    ['with class', { props: { ...props, class: 'gap-4' } }],
     ['with ui', { props: { ...props, ui: { content: 'bg-gray-50 dark:bg-gray-800' } } }],
     // Slots
     ['with default slot', { props, slots: { default: () => 'Default slot' } }],
diff --git a/test/components/__snapshots__/Collapsible.spec.ts.snap b/test/components/__snapshots__/Collapsible.spec.ts.snap
index 839ddb9f..4736b66c 100644
--- a/test/components/__snapshots__/Collapsible.spec.ts.snap
+++ b/test/components/__snapshots__/Collapsible.spec.ts.snap
@@ -1,33 +1,33 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Collapsible > renders with class correctly 1`] = `
-"<div data-state="open" class="space-y-2">
+"<div data-state="open" class="flex flex-col gap-4">
   <!--v-if-->
   <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="radix-vue-collapsible-content-2" data-state="open" style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
 </div>"
 `;
 
 exports[`Collapsible > renders with content slot correctly 1`] = `
-"<div data-state="open">
+"<div data-state="open" class="flex flex-col gap-2">
   <!--v-if-->
   <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="radix-vue-collapsible-content-5" data-state="open" style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;">Content slot</div>
 </div>"
 `;
 
 exports[`Collapsible > renders with default slot correctly 1`] = `
-"<div data-state="open">Default slot<div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="radix-vue-collapsible-content-4" data-state="open" style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
+"<div data-state="open" class="flex flex-col gap-2">Default slot<div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="radix-vue-collapsible-content-4" data-state="open" style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
 </div>"
 `;
 
 exports[`Collapsible > renders with open correctly 1`] = `
-"<div data-state="open">
+"<div data-state="open" class="flex flex-col gap-2">
   <!--v-if-->
   <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="radix-vue-collapsible-content-1" data-state="open" style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
 </div>"
 `;
 
 exports[`Collapsible > renders with ui correctly 1`] = `
-"<div data-state="open">
+"<div data-state="open" class="flex flex-col gap-2">
   <!--v-if-->
   <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden bg-gray-50 dark:bg-gray-800" id="radix-vue-collapsible-content-3" data-state="open" style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
 </div>"