Accordion

Collapsible content panels with smooth height animation. Items collapse each other by default; pass multiple to allow several open at once.

ExamplesCodeUsageChangelog

Examples

Default

One item open at a time.

Tailwind v4

<Accordion>
  <AccordionItem title="What is Jetpack UI?" :default-open="true">
    A private design system for Jetpack Labs built on Vue 3 and Tailwind CSS v4.
  </AccordionItem>
  <AccordionItem title="How do I install it?">
    Install via npm: npm install @jetpack-labs/jetpack-ui
  </AccordionItem>
  <AccordionItem title="Is dark mode supported?">
    Design tokens are built on CSS custom properties.
  </AccordionItem>
</Accordion>

Multiple open

Pass :multiple="true" to allow any number of items open simultaneously.

Tailwind v4

<Accordion :multiple="true">
  <AccordionItem title="Can multiple items be open?" :default-open="true">
    Yes — pass the multiple prop to the Accordion wrapper.
  </AccordionItem>
  <AccordionItem title="How do I set a default open item?" :default-open="true">
    Pass :default-open="true" to an AccordionItem.
  </AccordionItem>
</Accordion>

Accordion Props

Prop	Type	Default	Description
multiple	boolean	false	Allow multiple items to be open simultaneously

AccordionItem Props

Prop	Type	Default	Description
title	string	—	Header label text
defaultOpen	boolean	false	Expand this item on initial render

Slots

Accordion

Slot	Description
default	One or more AccordionItem components

AccordionItem

Slot	Description
default	The body content revealed when expanded