Railbase
GPTClaude

Carousel

A slideshow for cycling through images or cards (embla-carousel).

Updated

Default
<Carousel class="w-56">
  <CarouselContent>
    <CarouselItem><div class="flex h-28 items-center justify-center rounded-md border text-3xl font-semibold">1</div></CarouselItem>
    <CarouselItem><div class="flex h-28 items-center justify-center rounded-md border text-3xl font-semibold">2</div></CarouselItem>
    <CarouselItem><div class="flex h-28 items-center justify-center rounded-md border text-3xl font-semibold">3</div></CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

A slideshow for cycling through images or cards (embla-carousel).

Installation

railbase ui add carousel

Peer dependencies:

npm install embla-carousel

Note

railbase ui add also copies the button component — they ship alongside this component automatically.

Usage

import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "@/lib/ui/carousel";

<Carousel>
  <CarouselContent>
    <CarouselItem>Slide 1</CarouselItem>
    <CarouselItem>Slide 2</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Anatomy

Exported parts: useCarousel · Carousel · CarouselContent · CarouselItem · CarouselPrevious · CarouselNext

← PreviousCardNext →Chart