ProseAccordion

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, Pohon 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 Pohon UI free to use?" icon="i-lucide-circle-help"}
Yes! Pohon UI is completely free and open source under the MIT license. All 125+ components are available to everyone.
::

::accordion-item{label="Can I use Pohon UI with Vue without Nuxt?" icon="i-lucide-circle-help"}
Yes! While optimized for Nuxt, Pohon UI works perfectly with standalone Vue projects via our Vite plugin. You can follow the [installation guide](/pohon/getting-started/installation/vue) to get started.
::

::accordion-item{label="Is Pohon UI production-ready?" icon="i-lucide-circle-help"}
Pohon UI is designed for production Vue applications and maintained with component tests and regular updates.
::

::

API

Props

Prop	Default	Type
`type`		`"single" \| "multiple"`
`ui`		`{ root?: SlotClass; trigger?: SlotClass; } & { root?: SlotClass; item?: SlotClass; header?: SlotClass; trigger?: SlotClass; content?: SlotClass; body?: SlotClass; leadingIcon?: SlotClass; trailingIcon?: SlotClass; label?: SlotClass; }`

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 color-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 'pohon-ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          accordion: {
            slots: {
              root: 'my-5',
              trigger: 'text-base'
            }
          },
          accordionItem: {
            base: 'pb-4 color-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.