Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.

multiple

collapsible

<script setup lang="ts">
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion'

const { multiple = false, collapsible = true } = defineProps<{
  multiple?: boolean
  collapsible?: boolean
}>()
</script>

<template>
  <Accordion
    :key="multiple ? 'multiple' : 'single'"
    :type="multiple ? 'multiple' : 'single'"
    :collapsible="collapsible"
    :default-value="multiple ? ['item-1'] : 'item-1'"
    class="w-full max-w-lg"
  >
    <AccordionItem value="item-1">
      <AccordionTrigger>Product Information</AccordionTrigger>
      <AccordionContent>
        <p>
          Our flagship product combines cutting-edge technology with sleek
          design. Built with premium materials, it offers unparalleled
          performance and reliability.
        </p>
        <p class="mt-2">
          Key features include advanced processing capabilities, and an
          intuitive user interface designed for both beginners and experts.
        </p>
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-2">
      <AccordionTrigger>Shipping Details</AccordionTrigger>
      <AccordionContent>
        <p>
          We offer worldwide shipping through trusted courier partners.
          Standard delivery takes 3-5 business days, while express shipping
          ensures delivery within 1-2 business days.
        </p>
        <p class="mt-2">
          All orders are carefully packaged and fully insured. Track your
          shipment in real-time through our dedicated tracking portal.
        </p>
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-3">
      <AccordionTrigger>Return Policy</AccordionTrigger>
      <AccordionContent>
        <p>
          We stand behind our products with a comprehensive 30-day return
          policy. If you're not completely satisfied, simply return the
          item in its original condition.
        </p>
        <p class="mt-2">
          Our hassle-free return process includes free return shipping and
          full refunds processed within 48 hours of receiving the returned
          item.
        </p>
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</template>

Installation

Install the packages

npm install @animate-ui/vue motion-v

pnpm add @animate-ui/vue motion-v

yarn add @animate-ui/vue motion-v

bun add @animate-ui/vue motion-v

Add the shadcn-vue component

npx shadcn-vue@latest add accordion

pnpm dlx shadcn-vue@latest add accordion

yarn dlx shadcn-vue@latest add accordion

bun x shadcn-vue@latest add accordion

Animate it

The CLI finds your shadcn-vue components through components.json, swaps their primitive imports for Animate UI's and removes the CSS animation classes Motion replaces.

npx @animate-ui/cli@latest animate accordion

pnpm dlx @animate-ui/cli@latest animate accordion

yarn dlx @animate-ui/cli@latest animate accordion

bun x @animate-ui/cli@latest animate accordion

Usage

<script setup lang="ts">
import {
  AccordionContent,
  AccordionHeader,
  AccordionItem,
  AccordionRoot,
  AccordionTrigger,
} from '@animate-ui/vue/primitives/reka-ui';
</script>

<template>
  <AccordionRoot type="single" collapsible>
    <AccordionItem value="item-1">
      <AccordionHeader>
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
      </AccordionHeader>
      <AccordionContent>
        Yes. It adheres to the WAI-ARIA design pattern.
      </AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>

Animation

Content unfolds: its height grows from 0 while the content fades in from a 2px blur, over 350ms on a soft ease-out. While it moves, its bottom edge fades (over 16px, or over the part still hidden): the content never meets what follows it, an item's border, with a hard cut. It folds back the same way, in reverse, then unmounts.
Opening another item while one is closing retargets smoothly.
An item open by default animates open on mount (page load).
With force-mount, closed content stays in the DOM, collapsed and inert.
<AnimateUIProvider :tempo> paces both transitions.
Under reduced motion, the height changes at once; the fade and the blur still play.