Cover Flow
NewPro
A perspective carousel with one card facing you and the rest turned away on both sides, above a mirrored floor.
Customize
58°
0.3
150px
Reflection
Loop
When to use it
- Album, book or game libraries where the cover is the point
- Product ranges on a shop page, one model at a time
- Level or world pickers that show what comes next on each side
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 461
Installation
Cover Flow is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy cover-flow.tsx into components/ui and run npm install motion.
Usage
import { CoverFlow } from "@/components/ui/cover-flow";
<CoverFlow
label="Albums"
defaultIndex={3}
items={albums.map((a) => ({ id: a.id, src: a.cover, alt: a.title, label: a.title, meta: a.artist }))}
onSelect={(i) => play(albums[i])}
/>Props
19 properties| Property | Type | Default | Description |
|---|---|---|---|
| items | { id?, src?, alt?, content?, label?, meta? }[] | — | Cards. Pass content for any markup, or src and alt for an image. label and meta show under the centered card. |
| index | number | — | Controlled centered card. Leave it out to let the component manage itself. |
| defaultIndex | number | 0 | Starting card when uncontrolled. |
| onIndexChange | (index: number) => void | — | Called whenever a different card reaches the center. |
| onSelect | (index: number) => void | — | Called when the centered card is clicked. Side cards move to the center instead. |
| cardWidth | number | 240 | Card width in pixels. Shrinks to fit narrow containers. |
| cardHeight | number | cardWidth | Card height in pixels. |
| tilt | number | 58 | How far side cards turn away, in degrees. |
| spacing | number | 0.3 | Distance between side cards, as a fraction of the card width. |
| depth | number | 150 | How far side cards sit behind the center card, in pixels. |
| visibleSides | number | 3 | Cards shown on each side before fading out. |
| perspective | number | 1000 | CSS perspective distance in pixels. |
| reflection | boolean | true | Mirror of each card on the floor. |
| reflectionOpacity | number | 0.32 | Strength of the mirror, 0 to 1. |
| loop | boolean | false | Wraps from the last card back to the first. |
| showControls | boolean | true | Name, arrows and counter under the cards. |
| color | string | "#ff784f" | Color of the light on the floor. |
| label | string | "Gallery" | Accessible name of the carousel. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion