Carousel

Fluid responsive slide galleries powered by Embla carousel, offering arrow pagination and dynamic orientations.

Preview & Interactive Laboratory

Horizontal Deck

Card 1
Card 2
Card 3
Card 4

Usage & Implementation

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

<Carousel className="w-full max-w-xs">
  <CarouselContent>
    <CarouselItem>Slide 1</CarouselItem>
    <CarouselItem>Slide 2</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>
React / Tailwind

Granular Customization

1

Carousel Root

Configures parent viewport boundaries or orientations.

className={`className`}
2

Carousel Slide

Configures flex item bases sizes.

className={`className='basis-1/2'`}
3

Arrows Style

Apply custom positions or icons on standard arrows.

className={`className='bg-violet-600'`}

API Reference (Props)

PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Core sliding axis vector.
optsEmblaOptionsTypeundefinedDirect Embla parameters.