Simple Carousel

Basic carousel with navigation arrows and dot indicators

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

Nature's Majesty

Mountain Vista

Breathtaking mountain landscapes that inspire wanderlust

Customize
5000ms
520px
0.45
import CarouselSimpleCarousel from "@/components/repeat-ui/carousel-simple-carousel/preview";

<CarouselSimpleCarousel 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-simple-carousel --variant ts-tailwind

  2. Use it

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

    import CarouselSimpleCarousel from "@/components/repeat-ui/carousel-simple-carousel/preview";

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

Props

PropTypeDefaultDescription
itemsCarouselItem[]-Slides: { id, title, subtitle, image, description }.
autoPlaybooleantrueStart playing; visitors can pause.
autoPlayIntervalnumber5000Milliseconds per slide.
heightnumber520Slide height in pixels.
overlaynumber0.45How dark the shade behind the text is.
accentColorstring"#ffffff"Subtitle, indicator, progress and thumbnail ring colour.
showControlsbooleantrueArrows and play/pause.
showProgressbooleantrueA bar that fills over each slide.
showThumbnailsbooleantrueThumbnail strip.
showIndicatorsbooleantrueSlide indicators.
classNamestring""Extra classes for the root element.

More carousel

See all
Loop DeckInfinite loop carousel with card deck style presentation
Modern CarouselAdvanced carousel with fade transitions and auto-play