Accordion

Learn how to use the ProseAccordion component in your Nuxt app.

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

::accordion

::accordion-item{label="What are the main considerations when upgrading to Nuxt UI v3?" icon="i-lucide-circle-help"}
The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment.
::

::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?" icon="i-lucide-circle-help"}
Nuxt UI is now compatible with Vue! You can follow the [installation guide](/docs/getting-started/installation/vue) to get started.
::

::accordion-item{label="Can I customize the default styling?" icon="i-lucide-circle-help"}
Yes! Nuxt UI provides a comprehensive theming system that allows you to customize colors, spacing, typography, and component variants. You can override defaults through your app configuration or create entirely custom themes while maintaining accessibility and consistency.
::

::

API

Props

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

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

Vue Components

Specialized Vue components for enhanced content authoring and interactive documentation.

Badge

Learn how to use the ProseBadge component in your Nuxt app.