Coverflow Carousel
Browse a gallery in a five-card perspective carousel with arrow controls, a slide counter, and a link to the collection.
- Dependencies
- No extra packages
- Size
- 344 lines
- Controls
- 9 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/coverflow-carousel.json1 · Dependencies
None beyond React and Tailwind.
2 · Copy the source
components/onycx/coverflow-carousel.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the coverflow-carousel.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | CoverflowItem[] | — | { title, label, tag?, image, imageAlt?, href? }; designed for five cards. |
| heading | string | "Our spaces" | Display title (set in capitals) and the carousel's accessible label. |
| intro | string | "Considered rooms.|Different possibilities." | Kicker left of the title; | breaks the line on wide stages. Empty hides it. |
| series | string | "THE CONCEPT SERIES / 01—05" | Note right of the title, shown on stages wider than 860px. Empty hides it. |
| linkLabel / linkHref | string | "View the collection" / "#" | Underlined link in the bottom bar. Empty label hides it. |
| autoplay / interval | boolean / number | false / 4200 | Pauses on hover, focus, hidden tabs and reduced motion. |
| yaw / tilt | number | 10 / 5 | Inner side-card yaw and roll; the outer pair uses 1.6x yaw and 1.8x roll (16deg / 9deg). |
| background | string | "#201c20" | Panel colour. |
| accent | string | "#854f6c" | Focus outline colour (mauve in the source). |