CardCarousel

A carousel that centers the active card and scales down the neighboring peek cards for a focused, stack-like presentation. Perfect for testimonials, product highlights, and feature showcases.

Interactive Demo

Navigate with the arrows or drag to swipe between cards.

Wider peek

Push the side cards further out with peekDistance. Try 90 for a more airy layout where the neighbors are almost fully visible.

Tight stack

Smaller peekDistance values (e.g. 35) stack the cards closer together for a more layered, peeking-behind look.

With arrows and dots

Opt-in to prev/next buttons with showArrows and dot indicators below with showDots. Side cards are still clickable and drag-to-swipe still works.

Dots only

Use just showDots for a minimal look — navigate via dots, drag, or by clicking on side cards.

Usage

import { CardCarousel } from "@mantleui/react/motion";
import { ArrowLeft, ArrowRight } from "lucide-react";

const slides = testimonials.map((t) => (
  <div key={t.name}>{t.quote}</div>
));

// Default
<CardCarousel slides={slides} defaultValue={0} loop />

// Wider side cards
<CardCarousel slides={slides} peekDistance={90} peekOpacity={0.75} />

// Tight stacked look
<CardCarousel slides={slides} peekDistance={35} peekScale={0.8} />

// With arrow buttons
<CardCarousel slides={slides} showArrows />

// With dot indicators
<CardCarousel slides={slides} showDots />

// Both arrows and dots
<CardCarousel slides={slides} showArrows showDots />

// Custom icons
<CardCarousel
  slides={slides}
  showArrows
  prevIcon={<ArrowLeft size={20} />}
  nextIcon={<ArrowRight size={20} />}
/>

Props