Accordion
Create expandable content sections for better information organization.
Usage
Use the accordion and accordion-item components to display an Accordion in your content.
::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.
::
::
API
Props
| Prop | Default | Type |
|---|---|---|
type | 'multiple' | "multiple" | "single" |
ui | { root?: ClassNameValue; trigger?: ClassNameValue; } & { root?: ClassNameValue; item?: ClassNameValue; header?: ClassNameValue; trigger?: ClassNameValue; content?: ClassNameValue; body?: ClassNameValue; leadingIcon?: ClassNameValue; trailingIcon?: ClassNameValue; label?: ClassNameValue; }
|
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'
}
}
}
})
]
})