diff --git a/docs/app/components/content/examples/collapsible/CollapsibleExample.vue b/docs/app/components/content/examples/collapsible/CollapsibleExample.vue
deleted file mode 100644
index a6c10627..00000000
--- a/docs/app/components/content/examples/collapsible/CollapsibleExample.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <UCollapsible class="w-48">
-    <UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block />
-
-    <template #content>
-      <Placeholder class="h-48" />
-    </template>
-  </UCollapsible>
-</template>
diff --git a/docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue b/docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue
index f4f5c00c..657f2c8d 100644
--- a/docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue
+++ b/docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue
@@ -8,7 +8,13 @@ defineShortcuts({
 
 <template>
   <UCollapsible v-model:open="open" class="w-48">
-    <UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block />
+    <UButton
+      label="Open"
+      color="gray"
+      variant="subtle"
+      trailing-icon="i-heroicons-chevron-down-20-solid"
+      block
+    />
 
     <template #content>
       <Placeholder class="h-48" />
diff --git a/docs/content/3.components/collapsible.md b/docs/content/3.components/collapsible.md
index 1d5ce391..cd05031b 100644
--- a/docs/content/3.components/collapsible.md
+++ b/docs/content/3.components/collapsible.md
@@ -15,11 +15,28 @@ Use a [Button](/components/button) or any other component in the default slot of
 
 Then, use the `#content` slot to add the content displayed when the Collapsible is open.
 
-::component-example
+::component-code
 ---
-name: 'collapsible-example'
+prettier: true
+ignore:
+  - class
 class: 'justify-center'
+props:
+  class: 'w-48'
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block />
+
+  content: |
+
+    <Placeholder class="h-48" />
 ---
+
+:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block}
+
+#content
+:placeholder{class="h-48"}
 ::
 
 ## Examples