3.0.1

Components

Carousel

A horizontally scrollable set of slides with previous and next controls.

1
2
3
4
5

Installation

npx shadcn@latest add @blank/carousel

Usage

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

Examples

Several per view

Size items with basis-*. Spacing is a negative margin on CarouselContent matched by padding on each item, so set both when you change it.

1
2
3
4
5
6

Vertical

Give CarouselContent a height; a vertical carousel has nothing else to size it.

1
2
3
4
5

API

setApi hands you the Embla instance for counters, thumbnails or autoplay.

1
2
3
4
5

Slide 0 of 0