diff --git a/playground/pages/collapsible.vue b/playground/pages/collapsible.vue
index e6d13181..f91ca397 100644
--- a/playground/pages/collapsible.vue
+++ b/playground/pages/collapsible.vue
@@ -1,16 +1,13 @@
 <template>
   <UCollapsible class="space-y-2 w-48">
-    <UButton
-      class="group"
-      color="gray"
-      label="Open"
-      block
-      trailing-icon="i-heroicons-chevron-right-20-solid"
-      :ui="{ trailingIcon: 'group-data-[state=open]:rotate-90 transition' }"
-    />
+    <UButton class="group" color="gray" label="Open" block>
+      <template #trailing="trailingProps">
+        <UIcon name="i-heroicons-chevron-right-20-solid" :class="trailingProps.class" class="group-data-[state=open]:rotate-90 transition duration-200" />
+      </template>
+    </UButton>
 
     <template #content>
-      <div class="bg-primary-500 dark:bg-primary-400 h-12 w-full" />
+      <div class="bg-primary-500 dark:bg-primary-400 rounded-md h-12 w-full" />
     </template>
   </UCollapsible>
 </template>
\ No newline at end of file