diff --git a/docs/app/components/content/examples/collapsible/CollapsibleExample.vue b/docs/app/components/content/examples/collapsible/CollapsibleExample.vue
index fd0801c9..a6c10627 100644
--- a/docs/app/components/content/examples/collapsible/CollapsibleExample.vue
+++ b/docs/app/components/content/examples/collapsible/CollapsibleExample.vue
@@ -1,6 +1,6 @@
 <template>
-  <UCollapsible class="w-48 mx-auto">
-    <UButton label="Open" color="gray" variant="subtle" />
+  <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" />
diff --git a/docs/app/components/content/examples/collapsible/CollapsibleIconExample.vue b/docs/app/components/content/examples/collapsible/CollapsibleIconExample.vue
index 1442e8cc..7f0b02de 100644
--- a/docs/app/components/content/examples/collapsible/CollapsibleIconExample.vue
+++ b/docs/app/components/content/examples/collapsible/CollapsibleIconExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <UCollapsible class="w-48 mx-auto">
+  <UCollapsible class="w-48">
     <UButton
       class="group"
       label="Open"
diff --git a/docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue b/docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue
index 12f9cbd1..f4f5c00c 100644
--- a/docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue
+++ b/docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue
@@ -7,8 +7,8 @@ defineShortcuts({
 </script>
 
 <template>
-  <UCollapsible v-model:open="open" class="w-48 mx-auto">
-    <UButton label="Open" color="gray" variant="subtle" />
+  <UCollapsible v-model:open="open" 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" />
diff --git a/docs/content/3.components/collapsible.md b/docs/content/3.components/collapsible.md
index 50f2a26d..6a6f6d61 100644
--- a/docs/content/3.components/collapsible.md
+++ b/docs/content/3.components/collapsible.md
@@ -15,7 +15,12 @@ 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{name="collapsible-example"}
+::component-example
+---
+name: 'collapsible-example'
+class: 'justify-center'
+---
+::
 
 ## Examples
 
@@ -23,7 +28,12 @@ Then, use the `#content` slot to add the content displayed when the Collapsible
 
 You can control the open state by using the `default-open` prop or the `v-model:open` directive.
 
-:component-example{name="collapsible-open-example"}
+::component-example
+---
+name: 'collapsible-open-example'
+class: 'justify-center'
+---
+::
 
 ::note
 In this example, press :kbd{value="O" color="blue"} to toggle the Collapsible.
@@ -33,7 +43,12 @@ In this example, press :kbd{value="O" color="blue"} to toggle the Collapsible.
 
 Here is an example with a rotating icon in the Button that indicates the open state of the Collapsible.
 
-:component-example{name="collapsible-icon-example"}
+::component-example
+---
+name: 'collapsible-icon-example'
+class: 'justify-center'
+---
+::
 
 ## API