Accordion

Vertically stacked panels that expand to reveal their content. Built on reka-ui. Single-open by default; switch type to multiple to allow several at once.

Default

Single panel open at a time.

Dark previewReplay previewOpen in new tab

Usage

Import the parts you need from the component's folder.

ts
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion";

Multiple

Allow several panels open at once with type="multiple".

Dark previewReplay previewOpen in new tab

Controlled

Drive the open panel from outside via v-model.

Dark previewReplay previewOpen in new tab

Controlled from the buttons above.

Basic

A single, collapsible accordion with three panels of copy.

Dark previewReplay previewOpen in new tab

Crafted from a lightweight aluminium frame with a matte finish. Each unit is inspected before it ships and covered by a two-year limited warranty.

Disabled item

Disable an individual panel so its trigger cannot be toggled.

Dark previewReplay previewOpen in new tab

Bordered

Wrap the accordion in a container so the per-item dividers read as one boxed list.

Dark previewReplay previewOpen in new tab

Crafted from a lightweight aluminium frame with a matte finish, tested before every shipment.

Card

Give each item its own rounded border and spacing for a stacked-card layout.

Dark previewReplay previewOpen in new tab

Crafted from a lightweight aluminium frame with a matte finish. Each unit is inspected before it ships.

API Reference

Accordion

PropTypeDefaultDescription
type"single" | "multiple""single"Open one panel at a time, or many.
modelValuestring | string[]—Open value(s). Supports v-model. String for single, array for multiple.
defaultValuestring | string[]—Initial open value when v-model is not used.
collapsiblebooleanfalseAllow closing the only open panel (single mode).
disabledbooleanfalseDisable every item at once. Forwards to reka-ui AccordionRoot.
EventDescription
update:modelValueFires when the open panel(s) change. Enables v-model.
SlotDescription
defaultAccordionItem children.

AccordionItem

PropTypeDefaultDescription
valuestring—Unique value to track open state.
disabledbooleanfalseDisable this item.
SlotDescription
defaultAccordionTrigger and AccordionContent.

AccordionTrigger

PropTypeDefaultDescription
classstring—Extra classes, merged with cn(). Forwards remaining props to reka-ui AccordionTrigger.
SlotDescription
defaultTrigger label content.
iconOverride the trailing chevron. Defaults to a rotating ChevronDown.

AccordionContent

PropTypeDefaultDescription
forceMountbooleanfalseKeep content mounted while collapsed. Forwards to reka-ui AccordionContent.
SlotDescription
defaultPanel body revealed when open.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut Description
TabMoves focus to the next trigger.
EnterToggles the focused panel.
SpaceToggles the focused panel.
↑Moves focus to the previous trigger.
↓Moves focus to the next trigger.
HomeMoves focus to the first trigger.
EndMoves focus to the last trigger.
  • Built on reka-ui; each trigger controls its region via aria-controls and aria-expanded.
  • Collapsed regions are hidden from assistive technology until expanded.
TabsAspect Ratio