Cards

Stacked Cards

Animated stack of cards that automatically rotate with smooth transitions.

The CardStack component creates an animated stack of cards that automatically rotate with smooth transitions. It's perfect for showcasing a series of items with a visually appealing card stack effect.

Usage

<template>
  <div class="flex justify-center h-64">
    <MCardStack
      :items="[
        { id: 1, title: 'First Card', content: 'This is the first card in the stack.', name: 'Alice Johnson', designation: 'Software craft' },
        { id: 2, title: 'Second Card', content: 'This is the second card in the stack.', name: 'Bob Smith', designation: 'Product Manager' },
        { id: 3, title: 'Third Card', content: 'This is the third card in the stack.', name: 'Charlie Brown', designation: 'UX Designer' },
      ]"
    />
  </div>
</template>

Examples

Basic Stacked Cards

<template>
  <div class="flex justify-center h-96">
    <MCardStack
      :items="[
        {
          id: 1,
          title: 'Project Alpha',
          content: 'A revolutionary new product that changes everything.',
          name: 'Sam Rivera',
          designation: 'Lead Developer',
          avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80',
        },
        {
          id: 2,
          title: 'Project Betaeta',
          content: 'An innovative solution for modern businesses.',
          name: 'Sam Designer',
          designation: 'Senior Designer',
          avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80',
        },
        {
          id: 3,
          title: 'Project Gamma',
          content: 'A cutting-edge platform for the future.',
          name: 'Jordan Manager',
          designation: 'Project Manager',
          avatar: 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80',
        },
        {
          id: 4,
          title: 'Project Delta',
          content: 'A breakthrough technology that transforms industries.',
          name: 'Taylor Innovator',
          designation: 'Chief Innovation Officer',
          avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80',
        },
      ]"
      class="w-full max-w-md"
    >
      <template #card="{ item }">
        <UCard class="bg-default shadow-xl rounded-xl border-0">
          <div class="p-6">
            <div class="flex items-start mb-4">
              <img
                :src="item.avatar"
                :alt="item.name"
                class="w-14 h-14 rounded-full mr-4 border-2 border-primary-500"
              >
              <div>
                <h3 class="font-bold text-lg text-highlighted">
                  {{ item.name }}
                </h3>
                <p class="text-muted text-sm">
                  {{ item.designation }}
                </p>
              </div>
            </div>
            <h4 class="font-bold text-xl mb-2 text-highlighted">
              {{ item.title }}
            </h4>
            <p class="text-muted mb-4">
              {{ item.content }}
            </p>
            <div class="flex justify-between items-center">
              <UButton
                color="primary"
                variant="solid"
                size="sm"
              >
                View Project
              </UButton>
              <div class="flex space-x-2">
                <UButton
                  color="neutral"
                  variant="ghost"
                  size="sm"
                >
                  <UIcon
                    name="i-lucide-heart"
                    class="w-4 h-4"
                  />
                </UButton>
                <UButton
                  color="neutral"
                  variant="ghost"
                  size="sm"
                >
                  <UIcon
                    name="i-lucide-share"
                    class="w-4 h-4"
                  />
                </UButton>
              </div>
            </div>
          </div>
        </UCard>
      </template>
    </MCardStack>
  </div>
</template>

Customize

Offset10

Scale Factor0.06

Auto Rotate

Rotate Interval5000

Props

Prop	Type	Default	Description
`items`required	`Card[]`	-	Array of card objects to display in the stack.
`offset`	`number`	`10`	Vertical offset between cards in pixels.
`scaleFactor`	`number`	`0.06`	Scale factor for each subsequent card.
`autoRotate`	`boolean`	`true`	Whether to automatically rotate cards.
`rotateInterval`	`number`	`5000`	Interval between automatic rotations in milliseconds.
`class`	`string`	`'h-60 w-60 md:h-60 md:w-96'`	CSS classes to apply to the container.

Card Object Structure

Each card in the items array should have the following properties:

Prop	Type	Default	Description
`id`required	`number`	-	Unique identifier for the card.
`name`required	`string`	-	Name to display in the card footer.
`designation`required	`string`	-	Designation to display in the card footer.
`content`required	`string`	-	Content to display in the card body.
`title`	`string`	-	Title to display in the card header. If not provided, defaults to "Card id".

Methods

Prop	Type	Default	Description
`nextCard`	`function`	-	Manually rotate to the next card.
`prevCard`	`function`	-	Manually rotate to the previous card.
`startFlipping`	`function`	-	Start automatic card rotation.
`stopFlipping`	`function`	-	Stop automatic card rotation.

UI

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

Prop	Type	Default	Description
`ui`	`object`	-	Per-slot classes merged over the theme defaults.

Slot	Props	Description
`root`	-	`relative`
`card`	-	`absolute w-full h-full`
`header`	-	`flex items-center justify-between`
`title`	-	`text-lg font-semibold text-highlighted`
`content`	-	`flex-1 font-normal text-default`
`footer`	-	`flex items-center gap-2`
`avatar`	-	`rounded-full`
`name`	-	`text-muted font-medium dark:text-inverted`
`designation`	-	`text-muted font-normal dark:text-default text-sm`

Edit this pageorReport an issue

Bento Grid

A responsive grid of cards that reveal more on hover.

Card Swipe Deck

A deck of cards you throw left or right, with drag-driven stamps, a colour wash, a receding stack and an imperative API.