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! Nuxt UI is completely free and open source under the MIT license. All 100+ components are available to everyone.
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.
Yes! Nuxt UI is used in production by thousands of applications with extensive tests, regular updates, and active maintenance.
::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 |
|
|
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'
}
}
}
})
]
})