accordion

Accordion

Stacked sections the shopper opens and closes, one or several at a time, such as shipping and returns on a product page.

States: Default, Hover, Focus, Disabled

Parts

Part	File	Does
Accordion	Accordion.vue	Groups all parts of the accordion.
AccordionContent	AccordionContent.vue	Holds what its item shows while open.
AccordionItem	AccordionItem.vue	Groups a trigger with the content it opens and closes.
AccordionTrigger	AccordionTrigger.vue	Opens and closes the content of its item.

Anatomy

<Accordion>
  <AccordionItem>
    <AccordionTrigger />
    <AccordionContent />
  </AccordionItem>
</Accordion>

Styling

Part	Recipe
Accordion	accordion
AccordionContent	accordion-body
AccordionItem	accordion-item
AccordionTrigger	accordion-trigger

Install

Writes 5 files into components/ui/accordion/. For agents, npx @frontic/ui docs accordion prints this reference as markdown; the MCP server serves the same.

npm packages: @lucide/vue; @vueuse/core; reka-ui

API reference

Accordion Accordion.vue

Groups all parts of the accordion.

Prop	Type	Default
collapsible	boolean	false

disabled	boolean	false

dir	Direction	'ltr'

orientation	DataOrientation	'vertical'

unmountOnHide	boolean	true

asChild	boolean	false

as	AsTag \| Component	—
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default —
type	SingleOrMultipleType	—

modelValue	string \| string[]	—

defaultValue	string \| string[]	—

class	ClassValue	—

Event	Payload
update:modelValue	value: string \| string[] \| undefined

Slot	Slot props
default	{ modelValue: AcceptableValue \| AcceptableValue[] \| undefined; }

Recipe accordion	Sets
base: accordion	3 properties

AccordionContent AccordionContent.vue

AccordionItem AccordionItem.vue

AccordionTrigger AccordionTrigger.vue

Example