Skip to main content
A sleek, Apple-style card carousel with blur-loading images, modal expansion, and smooth scrolling controls. Reproduces the interactive “App Store / Apple TV” browsing experience.

​
Installation

npx inspira-ui add apple-card-carousel

​
Usage

<template>
  <AppleCardCarousel>
    <AppleCarouselItem :index="0">
      <AppleCard :card="card1" :index="0">
        <p>Extended content for card 1</p>
      </AppleCard>
    </AppleCarouselItem>
    <AppleCarouselItem :index="1">
      <AppleCard :card="card2" :index="1">
        <p>Extended content for card 2</p>
      </AppleCard>
    </AppleCarouselItem>
  </AppleCardCarousel>
</template>

<script setup>
import {
  AppleCardCarousel,
  AppleCarouselItem,
  AppleCard,
} from '@/components/ui/apple-card-carousel'

const card1 = {
  src: '/image1.jpg',
  title: 'Card Title',
  category: 'Category',
}

const card2 = {
  src: '/image2.jpg',
  title: 'Another Card',
  category: 'Category',
}
</script>

​
Components

The Apple Carousel suite is composed of four inter-related components:
ComponentPurpose
AppleCardCarouselThe horizontal scroll container with left / right controls.
AppleCarouselItemA wrapper that adds enter-animation and spacing to each card.
AppleCardA richly styled, clickable card that can expand into a fullscreen modal.
AppleBlurImageAn <img> replacement that starts blurred until the image loads.

​
AppleCardCarousel

​
Props

PropTypeDefaultDescription
initialScrollnumber0Horizontal scroll offset applied on mount (in px).

​
Slots

The default slot should contain one or more AppleCarouselItem components.

​
AppleCarouselItem

​
Props

PropTypeRequiredDescription
indexnumber✓Zero-based index; used to stagger the appear animation.

​
Slots

Default slot — place an AppleCard here.

​
AppleCard

​
Props

PropTypeRequiredDefaultDescription
card{ src: string; title: string; category: string }✓—Data object for the card.
indexnumber✓—Position within the carousel.
layoutboolean✕falseEnables shared-layout FLIP animation.

​
Slots

When the card is expanded (modal open) the default slot renders inside the modal body; you can inject extended content such as text, images, or videos.

​
AppleBlurImage

​
Props

PropTypeDefaultDescription
srcstring—Image source URL. Required.
altstring”Background of a beautiful view”Alt text.
widthnumber | stringimg naturalWidth attribute; omitted when using fill.
heightnumber | stringimg naturalHeight attribute; omitted when using fill.
fillbooleanfalseIf true, sets width:100%; height:100% via utility classes.
classstring""Additional classes merged via cn().
When the image fires the native load event it gracefully transitions from blur-sm to no-blur.

​
Credits

Ported from Aceternity UI Apple Card Carousel.

Build docs developers (and LLMs) love

Get started for freeTalk to us