Accordion

Create expandable content sections for better information organization.

Usage

Use the accordion and accordion-item components to display an Accordion in your content.

Yes! While optimized for Nuxt, Nuxt UI works perfectly with standalone Vue projects via our Vite plugin. You can follow the installation guide to get started.

::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 100+ 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.
::

::

API

Props

Prop	Default	Type
`type`	`'multiple'`	`"multiple" \| "single"`

Slots

Slot	Type
`default`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      accordion: {
        slots: {
          root: 'my-5',
          trigger: 'text-base'
        }
      },
      accordionItem: {
        base: 'pb-4 text-muted *:first:mt-0 *:last:mb-0 *:my-1.5'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          accordion: {
            slots: {
              root: 'my-5',
              trigger: 'text-base'
            }
          },
          accordionItem: {
            base: 'pb-4 text-muted *:first:mt-0 *:last:mb-0 *:my-1.5'
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

Code

Display inline code and syntax-highlighted code blocks with copy-to-clipboard support.

Badge

Display version numbers, status labels, and tags within your content.