docs(collapsible): update

docs/app/components/content/examples/collapsible/CollapsibleExample.vue

@@ -0,0 +1,9 @@
+<template>
+  <UCollapsible class="w-48 mx-auto">
+    <UButton label="Open" color="gray" variant="subtle" />
+
+    <template #content>
+      <Placeholder class="h-48" />
+    </template>
+  </UCollapsible>
+</template>

docs/app/components/content/examples/collapsible/CollapsibleIconExample.vue

@@ -0,0 +1,17 @@
+<template>
+  <UCollapsible class="w-48 mx-auto">
+    <UButton
+      class="group"
+      label="Open"
+      color="gray"
+      variant="subtle"
+      trailing-icon="i-heroicons-chevron-down-20-solid"
+      :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+      block
+    />
+
+    <template #content>
+      <Placeholder class="h-48" />
+    </template>
+  </UCollapsible>
+</template>

docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const open = ref(true)
+
+defineShortcuts({
+  o: () => open.value = !open.value
+})
+</script>
+
+<template>
+  <UCollapsible v-model:open="open" class="w-48 mx-auto">
+    <UButton label="Open" color="gray" variant="subtle" />
+
+    <template #content>
+      <Placeholder class="h-48" />
+    </template>
+  </UCollapsible>
+</template>

docs/content/3.components/collapsible.md

@@ -11,8 +11,42 @@ links:
 
 ## Usage
 
+Use a [Button](/components/button) or any other component in the default slot of the Collapsible.
+
+Then, use the `#content` slot to add the content that will be shown when the Collapsible is open.
+
+::component-example
+---
+name: 'collapsible-example'
+---
+::
+
 ## Examples
 
+### Control open state
+
+You can control the open state by using the `default-open` prop or the `v-model:open` directive.
+
+::component-example
+---
+name: 'collapsible-open-example'
+---
+::
+
+::note
+In this example, press :kbd{value="O" color="blue"} to toggle the Collapsible.
+::
+
+### With rotating icon
+
+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'
+---
+::
+
 ## API
 
 ### Props
@@ -23,9 +57,9 @@ links:
 
 :component-slots
 
-### Events
+### Emits
 
-:component-events
+:component-emits
 
 ## Theme
 

docs/nuxt.config.ts

@@ -127,6 +127,7 @@ export default defineNuxtConfig({
         'UButtonGroup',
         'UCheckbox',
         'UChip',
+        'UCollapsible',
         'UIcon',
         'UInput',
         'UKbd',