Apple Cards Carousel

Snap-scrolling row of tall image cards that morph into a full modal story.

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/apple-cards-carousel.json

Adds components/velora/apple-cards-carousel.tsx, installs motion.

A product section of five feature cards whose dialogs hold copy and key stats.

Prop	Type	Default
`children*` `CarouselCard` elements	`React.ReactNode`	`—`
`label` Accessible name for the scrollable region	`string`	`"Carousel"`

Also accepts every <div> attribute, forwarded to the root element.

Prop	Type	Default
`src*` Cover image URL	`string`	`—`
`category*` Small label above the title	`string`	`—`
`title*` Card title and dialog heading	`string`	`—`
`children*` Rich content shown once the card is opened	`React.ReactNode`	`—`
`className` Extra classes for the card	`string`	`—`

Reduced motion: Cards open and close instantly with no shared-element morph or backdrop fade, and the previous/next buttons jump instead of smooth-scrolling.
Keyboard: The row is a focusable region that arrow keys scroll; each card is a button that opens a modal dialog. Focus moves into the dialog, Tab and Shift+Tab stay inside it, Escape or Close dismisses it, and focus returns to the card. Previous/next buttons are disabled at either end.
Screen readers: The row is a labelled region containing a list of buttons named by category and title (aria-haspopup="dialog", aria-expanded); the dialog is aria-modal and named by its heading, and card images are decorative.