---
title: "ProseAccordion"
description: "Create expandable content sections for better information organization."
canonical_url: "https://ui.nuxt.com/docs/typography/accordion"
last_updated: "2026-05-28"
---
# ProseAccordion

> Create expandable content sections for better information organization.

## Usage

Use the `accordion` and `accordion-item` components to display an [Accordion](/docs/components/accordion) in your content.

```vue
<template>
  <__flatten>
  <p>
  <strong>
  Q: Is Nuxt UI free to use?</strong></p>
  <p>
  Yes! Nuxt UI is completely free and open source under the MIT license. All 125+ components are available to everyone.</p>
  <p>
  <strong>
  Q: Can I use Nuxt UI with Vue without Nuxt?</strong></p>
  <p>
  Yes! While optimized for Nuxt, Nuxt UI works perfectly with standalone Vue projects via our Vite plugin. You can follow the 
  <a href=/docs/getting-started/installation/vue>
  installation guide</a>
   to get started.</p>
  <p>
  <strong>
  Q: Is Nuxt UI production-ready?</strong></p>
  <p>
  Yes! Nuxt UI is used in production by thousands of applications with extensive tests, regular updates, and active maintenance.</p></__flatten>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=::accordion
  ---
  defaultValue:
    - '1'
  ---
  
  ::accordion-item{label="Is Nuxt UI free to use?" icon="i-lucide-circle-help"}
  Yes! Nuxt UI is completely free and open source under the MIT license. All 125+ components are available to everyone.
  ::
  
  ::accordion-item{label="Can I use Nuxt UI with Vue without Nuxt?" icon="i-lucide-circle-help"}
  Yes! While optimized for Nuxt, Nuxt UI works perfectly with standalone Vue projects via our Vite plugin. You can follow the [installation guide](/docs/getting-started/installation/vue) to get started.
  ::
  
  ::accordion-item{label="Is Nuxt UI production-ready?" icon="i-lucide-circle-help"}
  Yes! Nuxt UI is used in production by thousands of applications with extensive tests, regular updates, and active maintenance.
  ::
  
  ::
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  accordion
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  ---
  </span></span>
  <span class=line>
  <span class=swJcz>
  defaultValue</span>
  <span class=sMK4o>
  :
  </span></span>
  <span class=line>
  <span class=sMK4o>
    -</span>
  <span class=sMK4o>
   '</span>
  <span class=sfazB>
  1</span>
  <span class=sMK4o>
  '
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  ---
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  accordion-item</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  label</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  Is Nuxt UI free to use?</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   icon</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  <i class=shiki-icon-highlight szf0e />
  i-lucide-circle-help</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  Yes! Nuxt UI is completely free and open source under the MIT license. All 125+ components are available to everyone.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  accordion-item</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  label</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  Can I use Nuxt UI with Vue without Nuxt?</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   icon</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  <i class=shiki-icon-highlight szf0e />
  i-lucide-circle-help</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  Yes! While optimized for Nuxt, Nuxt UI works perfectly with standalone Vue projects via our Vite plugin. You can follow the </span>
  <span class=sMK4o>
  [</span>
  <span class=sfazB>
  installation guide</span>
  <span class=sMK4o>
  ](</span>
  <span class=sQLHv>
  /docs/getting-started/installation/vue</span>
  <span class=sMK4o>
  )</span>
  <span class=sTEyZ>
   to get started.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  accordion-item</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  label</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  Is Nuxt UI production-ready?</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   icon</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  <i class=shiki-icon-highlight szf0e />
  i-lucide-circle-help</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  Yes! Nuxt UI is used in production by thousands of applications with extensive tests, regular updates, and active maintenance.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </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 ProseProseAccordion component
 */
interface ProseProseAccordionProps {
  /**
   * @default "\"multiple\""
   */
  type?: "multiple" | "single" | undefined;
  ui?: ({ root?: ClassNameValue; trigger?: ClassNameValue; } & { root?: ClassNameValue; item?: ClassNameValue; header?: ClassNameValue; trigger?: ClassNameValue; content?: ClassNameValue; body?: ClassNameValue; leadingIcon?: ClassNameValue; trailingIcon?: ClassNameValue; label?: ClassNameValue; }) | undefined;
}
```

### Slots

```ts
/**
 * Slots for the ProseAccordion component
 */
interface ProseAccordionSlots {
  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/ProseAccordion.vue) and [theme](https://github.com/nuxt/ui/commits/v4/src/theme/prose/prose-accordion.ts).


## Sitemap

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