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

> 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 ProseCollapsible component
 */
interface ProseCollapsibleProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  ui?: { root?: ClassNameValue; content?: ClassNameValue; } | undefined;
  /**
   * When `true`, prevents the user from interacting with the collapsible.
   */
  disabled?: boolean | undefined;
  /**
   * The open state of the collapsible when it is initially rendered. <br> Use when you do not need to control its open state.
   */
  defaultOpen?: boolean | undefined;
  /**
   * The controlled open state of the collapsible. Can be binded with `v-model`.
   */
  open?: boolean | undefined;
  /**
   * When `true`, the element will be unmounted on closed state.
   * @default "true"
   */
  unmountOnHide?: boolean | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Collapsible component
 */
interface CollapsibleSlots {
  default(): any;
  content(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      collapsible: {
        slots: {
          root: 'my-5',
          trigger: [
            'group relative rounded-xs inline-flex items-center gap-1.5 text-muted hover:text-default text-sm focus-visible:ring-2 focus-visible:ring-primary focus:outline-none',
            'transition-colors'
          ],
          triggerIcon: 'size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
          triggerLabel: 'truncate',
          content: '*:first:mt-2.5 *:last:mb-0 *:my-1.5'
        }
      }
    }
  }
})
```

## Changelog

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


## Sitemap

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