Accordion

Stable v1.0.2

Collapsible sections for organizing content so people only see what they need. Supports single or multiple panels open at once, custom icons, and three visual styles.

Interactive Playground

Experiment with every Accordion and AccordionPanel prop live -- toggle multiple mode, switch variants and sizes, and edit each panel's header, icon, and disabled state. Click a panel header below to drive v-model directly.

Behavior

Multiple Panels Open

Appearance

Variant

Default

Size

Small (sm)

Panel 1 Content

Header

Icon

Panel 2 Content

Header

Icon

Disabled

Built from the ground up natively targeting Tailwind v4. By isolating design values into flattened runtime variables, components execute with zero style layout calculation bottlenecks.

Live Source Code

<Accordion v-model="activePanel">
  <AccordionPanel value="panel-1" header="System Architecture" icon="lucide:layers">
    Built from the ground up natively targeting Tailwind v4.
  </AccordionPanel>
  <AccordionPanel value="panel-2" header="Vite Optimization" icon="lucide:zap">
    The atomic configuration allows tree-shaking algorithms to drop unused style blocks instantly.
  </AccordionPanel>
</Accordion>

Basic Usage

Manages a single active collapsible panel using a modern defineModel directive.

Built from the ground up natively targeting Tailwind v4. By isolating design values into flattened runtime variables, components execute with zero style layout calculation bottlenecks.

Template

<Accordion v-model="activePanel">
  <AccordionPanel value="architecture" header="System Architecture" icon="lucide:layers">
    Content goes here...
  </AccordionPanel>
</Accordion>

Multiple Mode

Bind an array to the model value and attach the multiple boolean prop to open multiple layout containers concurrently.

Real-time authorization matrix validations execute instantly alongside Pinia configuration state pipelines.

Configured to calculate complex maritime VAT structures directly from unified client layout inputs.

Template

<!-- Multiple value state initialized as ref(['auth', 'billing']) -->
<Accordion multiple v-model="multipleActive">
  <AccordionPanel value="auth" header="Security" icon="lucide:shield-check" />
  <AccordionPanel value="disabled" header="Legacy" disabled />
</Accordion>

Sizing Scales

Pass the prefix-safe size property (xs, sm, md, lg, xl) to compress or expand structural layouts cleanly.

Small Variant (Compact Dashboard Layouts)

Condensed structural layout execution blocks optimize space parameters inside complex navigation displays.

Medium Variant (Default)

Standard padding layouts provide balanced click targets suitable for most application interfaces.

Large Variant (Detailed Content Forms)

Expanded padding layouts provide enhanced click targets and breathing room for intensive verification readouts.

Template

<Accordion size="xs" v-model="active"> ... </Accordion>
<Accordion size="sm" v-model="active"> ... </Accordion>
<Accordion size="lg" v-model="active"> ... </Accordion>
<Accordion size="xl" v-model="active"> ... </Accordion>

Visual Variants: Side-by-Side Comparison

Modify the outer boundaries using the variant mapping property. The differences are most apparent when managing multiple stacked panels.

Design Tip: Use default or filled for tight, data-heavy sidebars where vertical space is limited. Use separated for main page settings or forms where you want each section to feel like a distinct, floating card.

1. Default VariantPanels share internal borders. The active panel header turns primary colored, but retains a transparent background.

Configure waypoints and port ETA estimates.

2. Filled VariantPanels share internal borders. The active panel header is highlighted with a solid, tinted background for strong visual hierarchy.

Configure waypoints and port ETA estimates.

3. Separated VariantPanels do not share borders. They are physically separated by a gap. The active panel acts as an independent floating card with a solid primary header.

Configure waypoints and port ETA estimates.

Template

<Accordion variant="default" v-model="active"> ... </Accordion>
<Accordion variant="filled" v-model="active"> ... </Accordion>
<Accordion variant="separated" v-model="active"> ... </Accordion>

Advanced Custom Slots

Bypass traditional prop boundaries entirely with targeted layout slot injections.

Slot overrides execute cleanly here, passing contextual parameters directly back out to the consumer workspace template.

Template

<Accordion v-model="active">
  <AccordionPanel value="analytics">
    <template #header="{ isOpen }">
      <div class="flex items-center gap-2">
        <span :class="isOpen ? 'text-primary' : 'text-main'">Engine Status</span>
        <span class="bg-success text-on-success text-[10px] px-1.5">LIVE</span>
      </div>
    </template>
    <template #toggleicon="{ isOpen }">
      <Icon :icon="isOpen ? 'lucide:minus-circle' : 'lucide:plus-circle'" />
    </template>
    Content...
  </AccordionPanel>
</Accordion>

API Reference

Accordion Props

Name	Type / Signature	Default	Description
modelValue	string \| number \| (string \| number)[] \| null	null	Active panel key(s), bound via v-model. An array when multiple is true.
multiple	boolean	false	Allows more than one panel to be expanded simultaneously.
variant	"default" \| "filled" \| "separated"	"default"	Visual treatment of panel headers.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"sm"	Controls header/content padding, text size, and icon size.

AccordionPanel Props

Name	Type / Signature	Default	Description
value	string \| number	required	Unique key identifying this panel, matched against the parent Accordion's v-model.
header	string	undefined	Header text. Use the #header slot for custom markup instead.
disabled	boolean	false	Prevents the panel from being toggled.
icon	string	undefined	Lucide icon rendered before the header text. Use the #icon slot to override entirely.

AccordionPanel Slots

Slot Name	Exposed Bindings	Description
icon	{ isOpen: boolean }	Overrides the leading icon.
header	{ isOpen: boolean }	Overrides the header text content.
default	{ isOpen: boolean }	The collapsible panel body content.
toggleicon	{ isOpen: boolean }	Overrides the trailing chevron/expand indicator.