Carousel: Vertical

orientation="vertical" needs a height on <CarouselContent />. The buttons move above and below.

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

const slides = [1, 2, 3, 4, 5]

export function CarouselVertical() {
  return (
    <div className="w-full max-w-xs py-12">
      <Carousel orientation="vertical" aria-label="Vertical">
        <CarouselContent className="h-52">
          {slides.map((value) => (
            <CarouselItem key={value} className="basis-1/2">
              <div className="flex h-full items-center justify-center rounded-xl border bg-card p-6 text-3xl font-semibold">
                {value}
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  )
}

Add this example

This adds the example as components/examples/carousel/vertical.tsx, together with the Carousel component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/carousel-vertical.json

To add only the component, follow the Carousel installation.

Props in this example

The Carousel props this example sets, from the API reference.

Carousel

Prop	Type	Default
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`

CarouselContent

Prop	Type	Default
`className`Applied to the track that holds the slides.	`string`	`–`

Every prop is in the Carousel API reference.

More Carousel examples

See them all, with keyboard support and accessibility notes, on the Carousel page.