---
title: "ProseCollapsible"
description: "Toggle content visibility with smooth expand and collapse animations."
canonical_url: "https://ui.nuxt.com/docs/typography/collapsible"
last_updated: "2026-05-26"
---
# ProseCollapsible

> Toggle content visibility with smooth expand and collapse animations.

## Usage

Wrap your content with the `collapsible` component to display a [Collapsible](/docs/components/collapsible) in your content.

```vue
<template>
  <__flatten>
  <table>
  <thead>
  <tr>
  <th>
  Prop</th>
  <th>
  Default</th>
  <th>
  Type</th></tr></thead>
  <tbody>
  <tr>
  <td>
  <code>
  name</code></td>
  <td />
  <td>
  <code className=language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight language=ts-type style=>
  <span class=sBMFI>
  string</span></code></td></tr>
  <tr>
  <td>
  <code>
  size</code></td>
  <td>
  <code>
  md</code></td>
  <td>
  <code className=language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight language=ts-type style=>
  <span class=sBMFI>
  string</span></code></td></tr>
  <tr>
  <td>
  <code>
  color</code></td>
  <td>
  <code>
  neutral</code></td>
  <td>
  <code className=language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight language=ts-type style=>
  <span class=sBMFI>
  string</span></code></td></tr></tbody></table></__flatten>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=::collapsible
  
  | Prop    | Default   | Type                     |
  |---------|-----------|--------------------------|
  | `name`  |           | `string`{lang="ts-type"} |
  | `size`  | `md`      | `string`{lang="ts-type"} |
  | `color` | `neutral` | `string`{lang="ts-type"} |
  
  ::
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  collapsible
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sTEyZ>
  | Prop    | Default   | Type                     |
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  |---------|-----------|--------------------------|
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  name</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
    |           | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  string</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
  {lang="ts-type"} |
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  size</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
    | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  md</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
        | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  string</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
  {lang="ts-type"} |
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  color</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
   | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  neutral</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
   | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  string</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
  {lang="ts-type"} |
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span></code></pre></template>
</template>
```

## API

### Props

```ts
/**
 * Props for the ProseProseCollapsible component
 */
interface ProseProseCollapsibleProps {
  /**
   * The icon displayed to toggle the collapsible.
   */
  icon?: any;
  /**
   * The name displayed in the trigger label.
   */
  name?: string | undefined;
  /**
   * The text displayed when the collapsible is open.
   */
  openText?: string | undefined;
  /**
   * The text displayed when the collapsible is closed.
   */
  closeText?: string | undefined;
  ui?: ({ root?: ClassNameValue; trigger?: ClassNameValue; triggerIcon?: ClassNameValue; triggerLabel?: ClassNameValue; content?: ClassNameValue; } & { root?: ClassNameValue; content?: ClassNameValue; }) | undefined;
}
```

### Slots

```ts
/**
 * Slots for the ProseCollapsible component
 */
interface ProseCollapsibleSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {}
  }
})
```

## Changelog

See commit history for [component](https://github.com/nuxt/ui/commits/v4/src/runtime/components/prose/ProseCollapsible.vue) and [theme](https://github.com/nuxt/ui/commits/v4/src/theme/prose/prose-collapsible.ts).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.