title: Apple Card Carousel
description: A sleek, Apple‑style card carousel with blur‑loading images, modal expansion, and smooth scrolling controls.
---

```vue
<template>
  <AppleCardCarousel>
    <AppleCarouselItem
      v-for="(card, index) in data"
      :key="index"
      :index="index"
    >
      <AppleCard
        :card="card"
        :index="index"
        :layout="true"
      >
        <div
          :key="`dummy-content${index}`"
          class="mb-4 rounded-3xl bg-[#F5F5F7] p-8 md:p-14 dark:bg-neutral-800"
        >
          <p
            class="mx-auto max-w-3xl font-sans text-base text-neutral-600 md:text-2xl dark:text-neutral-400"
          >
            <span class="font-bold text-neutral-700 dark:text-neutral-200">
              The first rule of Apple club is that you boast about Apple club.
            </span>
            Keep a journal, quickly jot down a grocery list, and take amazing class notes. Want to
            convert those notes to text? No problem. Langotiya jeetu ka mara hua yaar is ready to
            capture every thought.
          </p>
          <img
            src="https://assets.aceternity.com/macbook.png"
            alt="Macbook mockup from Aceternity UI"
            height="500"
            width="500"
            class="mx-auto size-full object-contain md:size-1/2"
          />
        </div>
      </AppleCard>
    </AppleCarouselItem>
  </AppleCardCarousel>
</template>

<script lang="ts" setup>
const data = [
  {
    category: "Artificial Intelligence",
    title: "You can do more with AI.",
    src: "https://images.unsplash.com/photo-1593508512255-86ab42a8e620?q=80&w=3556&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },
  {
    category: "Productivity",
    title: "Enhance your productivity.",
    src: "https://images.unsplash.com/photo-1531554694128-c4c6665f59c2?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    // content: <DummyContent />,
  },
  {
    category: "Product",
    title: "Launching the new Apple Vision Pro.",
    src: "https://images.unsplash.com/photo-1713869791518-a770879e60dc?q=80&w=2333&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    // content: <DummyContent />,
  },

  {
    category: "Product",
    title: "Maps for your iPhone 15 Pro Max.",
    src: "https://images.unsplash.com/photo-1599202860130-f600f4948364?q=80&w=2515&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },
  {
    category: "iOS",
    title: "Photography just got better.",
    src: "https://images.unsplash.com/photo-1602081957921-9137a5d6eaee?q=80&w=2793&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },
  {
    category: "Hiring",
    title: "Hiring for a Staff Software Engineer",
    src: "https://images.unsplash.com/photo-1511984804822-e16ba72f5848?q=80&w=2048&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },
];
</script>

```

## Overview

The **Apple Carousel** suite is composed of four inter‑related components:

| Component           | Purpose                                                                  |
| ------------------- | ------------------------------------------------------------------------ |
| `AppleCardCarousel` | The horizontal scroll container with left / right controls.              |
| `AppleCarouselItem` | A wrapper that adds enter‑animation and spacing to each card.            |
| `AppleCard`         | A richly styled, clickable card that can expand into a fullscreen modal. |
| `AppleBlurImage`    | An `<img>` replacement that starts blurred until the image loads.        |

Together they reproduce the interactive “App Store / Apple TV” browsing experience.

---

## `AppleCardCarousel`

| Prop            | Type     | Default | Description                                        |
| --------------- | -------- | ------- | -------------------------------------------------- |
| `initialScroll` | `number` | `0`     | Horizontal scroll offset applied on mount (in px). |

### Slots

The default slot should contain one or more **`AppleCarouselItem`** components.

### Emits

_No custom events._

---

## `AppleCarouselItem`

| Prop    | Type     | Required | Description                                             |
| ------- | -------- | -------- | ------------------------------------------------------- |
| `index` | `number` | ✓        | Zero‑based index; used to stagger the appear animation. |

### Slots

Default slot — place an **`AppleCard`** here.

---

## `AppleCard`

| Prop     | Type                                               | Required | Default | Description                           |
| -------- | -------------------------------------------------- | -------- | ------- | ------------------------------------- |
| `card`   | `{ src: string; title: string; category: string }` | ✓        | —       | Data object for the card.             |
| `index`  | `number`                                           | ✓        | —       | Position within the carousel.         |
| `layout` | `boolean`                                          | ✕        | `false` | Enables 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.

### Emits

_No custom events (relies on injected `CarouselKey` context)._

---

## `AppleBlurImage`

| Prop     | Type               | Default                          | Description                                                    |
| -------- | ------------------ | -------------------------------- | -------------------------------------------------------------- |
| `src`    | `string`           | **—**                            | Image source URL. _Required._                                  |
| `alt`    | `string`           | "Background of a beautiful view" | Alt text.                                                      |
| `width`  | `number \| string` | _img natural_                    | Width attribute; omitted when using `fill`.                    |
| `height` | `number \| string` | _img natural_                    | Height attribute; omitted when using `fill`.                   |
| `fill`   | `boolean`          | `false`                          | If `true`, sets `width:100%; height:100%` via utility classes. |
| `class`  | `string`           | `""`                             | Additional classes merged via `cn()`.                          |

When the image fires the native `load` event it gracefully transitions from `blur-sm` to no‑blur.

---

## Install using CLI

```vue
<InstallationCli component-id="apple-card-carousel" />
```

## Install Manually

Copy and paste the following code in the same folder

::code-group

:CodeViewerTab{filename="AppleCardCarousel.vue" language="vue" componentName="AppleCardCarousel" type="ui" id="apple-card-carousel"}
:CodeViewerTab{filename="AppleCarouselItem.vue" language="vue" componentName="AppleCarouselItem" type="ui" id="apple-card-carousel"}
:CodeViewerTab{filename="AppleCard.vue" language="vue" componentName="AppleCard" type="ui" id="apple-card-carousel"}
:CodeViewerTab{filename="AppleBlurImage.vue" language="vue" componentName="AppleBlurImage" type="ui" id="apple-card-carousel"}
:CodeViewerTab{filename="AppleCarouselContext.ts" language="ts" componentName="AppleCarouselContext" type="ui" id="apple-card-carousel" extension="ts"}

::

---

## Features

- **Blur‑Up Images** &mdash; Pleasant loading for card thumbnails.
- **Shared Layout Animation** &mdash; Optional FLIP animation between thumbnail and modal using `layoutId`.
- **Keyboard & Click Outside Close** &mdash; ⌘‑style modal dismissal (Esc key or outside click).
- **Accessible Scrolling Controls** &mdash; Prev / next buttons with disabled state.
- **Mobile‑Aware Scroll Calculations** &mdash; Ensures cards recentre correctly when closed on small screens.

## Credits

- Ported from [Aceternity UI Apple Card Carousel](https://ui.aceternity.com/components/apple-cards-carousel).