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

> 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 ProseAccordion component
 */
interface ProseAccordionProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  items?: T[] | undefined;
  /**
   * The icon displayed on the right side of the trigger.
   */
  trailingIcon?: any;
  /**
   * The key used to get the value from the item.
   * @default "\"value\""
   */
  valueKey?: GetItemKeys<T> | undefined;
  /**
   * The key used to get the label from the item.
   * @default "\"label\""
   */
  labelKey?: GetItemKeys<T> | undefined;
  ui?: { root?: ClassNameValue; item?: ClassNameValue; header?: ClassNameValue; trigger?: ClassNameValue; content?: ClassNameValue; body?: ClassNameValue; leadingIcon?: ClassNameValue; trailingIcon?: ClassNameValue; label?: ClassNameValue; } | undefined;
  /**
   * When type is "single", allows closing content when clicking trigger for an open item.
   * When type is "multiple", this prop has no effect.
   * @default "true"
   */
  collapsible?: boolean | undefined;
  /**
   * The default active value of the item(s).
   * 
   * Use when you do not need to control the state of the item(s).
   */
  defaultValue?: string | string[] | undefined;
  /**
   * The controlled value of the active item(s).
   * 
   * Use this when you need to control the state of the items. Can be binded with `v-model`
   */
  modelValue?: string | string[] | undefined;
  /**
   * Determines whether a "single" or "multiple" items can be selected at a time.
   * 
   * This prop will overwrite the inferred type from `modelValue` and `defaultValue`.
   * @default "\"single\""
   */
  type?: SingleOrMultipleType | undefined;
  /**
   * When `true`, prevents the user from interacting with the accordion and all its items
   */
  disabled?: boolean | undefined;
  /**
   * When `true`, the element will be unmounted on closed state.
   * @default "true"
   */
  unmountOnHide?: boolean | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Accordion component
 */
interface AccordionSlots {
  default(): any;
  leading(): any;
  trailing(): any;
  content(): any;
  body(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      accordion: {
        slots: {
          root: 'my-5',
          trigger: 'text-base'
        }
      }
    }
  }
})
```

## Changelog

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


## Sitemap

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