Docs › Components › Carousel

Shadcn Carousel

The shadcn/ui Carousel is a swipeable slider built on Embla and styled with Tailwind CSS v4. It supports drag, keyboard navigation, previous/next controls, autoplay via plugins, and horizontal or vertical orientation. Carousels showcase products and testimonials across ShadcnStore blocks.

Key features

• Drag, keyboard, and button navigation.
• Horizontal or vertical orientation.
• Autoplay and other behavior via Embla plugins.
• Access the API for custom controls with setApi.
• Responsive item sizing with Tailwind basis utilities.

Installation

npx shadcn@latest add carousel

Usage

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

export function Example() {
  return (
    <Carousel className="w-full max-w-xs">
      <CarouselContent>
        {items.map((item, i) => (
          <CarouselItem key={i}>{item}</CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}

Multiple items per view

Set a fractional basis on each CarouselItem to show several slides at once. Combine with an align: "start" option so items snap to the left edge.

<Carousel opts={{ align: "start" }}>
  <CarouselContent>
    <CarouselItem className="basis-1/3">…</CarouselItem>
  </CarouselContent>
</Carousel>

Built on Embla

The Carousel is built on Embla Carousel and is independent of the UI primitive layer.

Accessibility

• Previous/next controls have accessible names; keep them.
• Keyboard users can move with arrow keys when the carousel is focused.
• Avoid autoplaying important content without a pause control.

When to use the Carousel

Use a Carousel to browse a set of visual items in limited space: product images, testimonials, logos, or featured cards. For a full gallery grid, use a layout of Cards. For paged text results, use Pagination.

Used in these blocks

• Product overview: product image galleries.
• Testimonials: rotating quotes.
• Hero sections: featured slides.

Related components

Carousel items are usually Cards, and controls reuse Button styling. For fixed image ratios, wrap slides in an Aspect Ratio.

FAQ

What is the shadcn carousel used for?

The Carousel is a swipeable slider for stepping through a set of items such as product images, testimonials, or featured cards.

Does the shadcn carousel use Embla?

Yes. It wraps Embla Carousel, so it supports drag, keyboard, autoplay via plugins, and horizontal or vertical orientation.

How do I make the carousel vertical?

Set orientation to vertical on the Carousel and give the content a fixed height.

How do I add autoplay?

Pass the Embla Autoplay plugin to the carousel's plugins prop.