Expandable Cards

Expandable Cards renders a vertical list of collapsible items. Only one card is open at a time by default; enable multiple to allow several open simultaneously. Each header animates its chevron on toggle, and the body expands with height/opacity via AnimatePresence and motion-v.

Usage

Provide an array of items with title and content. You can also pass extra fields on each item and access them via the item slot. For multi-select, set multiple to true.

<template>
  <div class="w-full max-w-md">
    <MExpandableCards
      :items="items"
    />
  </div>
</template>

<script setup lang="ts">
const items = [
  {
    title: 'What is Nuxt?',
    content: 'Nuxt is an open source framework that makes web development intuitive and powerful. Build performant and production-grade full-stack web apps and websites with confidence.',
  },
  {
    title: 'What is Nuxt Motion Block?',
    content: 'A collection of ready-to-use animated components built with motion-v and Nuxt. Copy, paste, and customize to add motion to your Nuxt apps.',
  },
  {
    title: 'Is it free to use?',
    content: 'Yes, Nuxt Motion Block is open source and free to use in your personal and commercial projects.',
  },
]
</script>

Customize

Props

Events

No events are emitted by this component.

Slots

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.expandableCards in app.config.ts.

Accessibility

The header is a plain clickable div with cursor-pointer (no button role, aria-expanded, or aria-controls). The chevron uses an inline SVG with no accessible name. The expanded region uses AnimatePresence but has no ARIA attributes linking it to the trigger. Keyboard navigation (Enter/Space) is not handled. No prefers-reduced-motion awareness is present. Consumers should add their own accessible triggers if keyboard/screen-reader support is required.

Performance

• Each item enters with a spring (stiffness: 300, damping: 30, y: 20, opacity: 0, delay: index*0.05).
• Chevron rotation uses a spring (stiffness: 300, damping: 25, rotate: isOpen ? 180 : 0).
• Expanded body animates height/opacity with AnimatePresence and spring (stiffness: 300, damping: 30) using height: 'auto' inside the motion wrapper.
• State is tracked in a Set<number> for O(1) membership checks; toggling clears the set when not multiple.
• No timers, heavy computations, or WebGL. Rendering scales linearly with items.length.