Modern Carousel

Advanced carousel with fade transitions and auto-play

$ npx @hritik-sharmaa/repeat-ui add carousel-modern-carousel
Category
Carousel
Added
Aug 17, 2025
Version
2.0.0
Packages
motion
Flavors
TS · JS · Tailwind · CSS
Live preview
Mountain Vista

Mountain Vista

Nature's Majesty

Breathtaking mountain landscapes that inspire wanderlust

Ocean Waves

Ocean Waves

Coastal Beauty

The rhythmic dance of waves against pristine shores

Forest Path

Forest Path

Woodland Serenity

Peaceful trails through ancient woodland sanctuaries

Desert Dunes

Desert Dunes

Golden Horizons

Endless golden sands sculpted by desert winds

Customize
4000ms
140px
25°
340px
420px
import CarouselModernCarousel from "@/components/repeat-ui/carousel-modern-carousel/preview";

<CarouselModernCarousel items={items} />

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add carousel-modern-carousel --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/carousel-modern-carousel/.

    import CarouselModernCarousel from "@/components/repeat-ui/carousel-modern-carousel/preview";

export default function Page() {
  return <CarouselModernCarousel />;
}

Props

PropTypeDefaultDescription
itemsModernCarouselItem[]-Slides: { id, title, subtitle, image, description }.
autoPlaybooleantrueStart playing; visitors can pause. Also pauses while hovered.
autoPlayIntervalnumber4000Milliseconds per slide.
accentColorstring"#60a5fa"Ring, subtitle, dot and play button colour.
spacingnumber140Horizontal gap between cards, in pixels.
anglenumber25How far side cards turn away, in degrees.
cardWidthnumber340Card width in pixels.
cardHeightnumber420Card height in pixels.
classNamestring""Extra classes for the root element.

More carousel

See all
Loop DeckInfinite loop carousel with card deck style presentation
Simple CarouselBasic carousel with navigation arrows and dot indicators