Cover flowPro
A depth rail of images you can throw, with soft grounded shadows and a quiet reflection.
Live · keyboard ready
- Round trip
- 2.6 mi
- Elevation gain
- 750 ft
- Best light
- Sunset
- Six to twelve visual items where looking at one at a time is the point, such as albums, places, or collections.
- Showcase rails that should respond to drag, throw, and sideways trackpad scroll.
- Use carousel for general slides or content cards.
- Use photo-grid or lightbox-gallery for a large library.
- Use depth-cards for about three rich choices that open into detail.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { CoverFlow } from "@/registry/components/cover-flow/cover-flow"; export function Hikes() { return ( <CoverFlow label="Hikes for this fall" items={[ { id: "ridge", title: "Ridge Loop", subtitle: "Mount Tam", meta: "8 km", image: "/hikes/ridge.jpg" }, { id: "falls", title: "Cataract Falls", subtitle: "Marin", meta: "5 km", image: "/hikes/falls.jpg" }, ]} onIndexChange={setIndex} /> );}CoverFlow
A depth rail for browsing a short collection of images one at a time. The front card stands forward while the rest recede to either side, and each image drifts inside its frame as the rail moves.
PropTypeDefaultDescription
itemsRequired{ id: string; title: string; subtitle?: string; meta?: string; image: string; imagePosition?: string; alt?: string }[]–Cards in order. alt defaults to the title. Generic: extra fields on your items are passed back to renderCaption.labelRequiredstring–Accessible name of the carousel, such as "Hikes for this fall".indexnumber–Controlled front card. Pair with onIndexChange.defaultIndexnumber0Initial front card when uncontrolled.onIndexChange(index: number) => void–Called when a different card settles in front, and while a drag passes over one.renderCaption(item: T, index: number) => ReactNode–Replaces the caption under the rail. It changes with the front card.classNamestring–Extra class on the root.- ArrowLeftorArrowRight
- Steps one card while the rail has focus.
- HomeorEnd
- Jumps to the first or last card.
- The root is labelled with aria-roledescription="carousel"; each card is a group with aria-roledescription="slide" and a label like "2 of 8: Ridge Loop".
- Cards away from the front are aria-hidden, and position ticks are labelled "Show <title>" with aria-current on the front one. Ticks are out of the tab order; the rail itself takes focus and handles the keys.
- The front card is announced in a polite live region.
- Drag or throw the rail and it lands on the card its momentum reaches, on a spring tuned to the release speed; a quick flick always moves at least one card. The ends rubber-band.
- Sideways trackpad scrolls move the rail directly, then settle on a card with the swipe's momentum. Clicking a card beside the front one brings it forward.
- Cards scale, dim, turn toward the center, and recede with distance while each image drifts inside its frame; the caption rises in from the direction of travel.
- Reduced motion jumps between cards, turns off the drift and the turn, and keeps short fades. A drag past 40px or one trackpad swipe steps one card.
- Cards size with the container at clamp(168px, 38cqw, 272px), so the rail scales from phones to wide sections.
- The stage uses touch-action pan-y, so vertical swipes still scroll the page and sideways ones move the rail.
- Every card is rendered, but cards far from the front get visibility hidden; keep the collection to a few dozen at most.
- Transforms and image drift run on motion values, and one ResizeObserver reads the card width.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Choose it for six to twelve visual items where one at a time is the point (places, albums, collections). Use carousel for general slides and photo-grid for a large library.
- Items are generic, so pass your own records and render extra fields through renderCaption.
The full library index for assistants is at /llms.txt.