Carousel

A composable carousel component with horizontal and vertical orientations, built on Embla Carousel.

Basic Example

Slide 1

Slide 2

Slide 3

Multiple Items Per View

Use opts to configure how many slides are visible at once.

Loop Mode

Enable infinite looping with opts={{ loop: true }}.

Slide 1

Slide 2

Slide 3

Installation

npx visor add carousel

This copies two files into your project:

components/ui/carousel/carousel.tsx — the component
components/ui/carousel/carousel.module.css — the styles

Usage

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

export default function Example() {
  return (
    <Carousel>
      <CarouselContent>
        <CarouselItem>Slide 1</CarouselItem>
        <CarouselItem>Slide 2</CarouselItem>
        <CarouselItem>Slide 3</CarouselItem>
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}

API Reference

CarouselProps

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Scroll direction of the carousel.
`opts`	`EmblaOptionsType`	—	Embla Carousel options for fine-grained control.
`plugins`	`EmblaPluginType[]`	—	Embla Carousel plugins (e.g., autoplay, auto-scroll).
`setApi`	`(api: CarouselApi) => void`	—	Callback to receive the Embla API instance.

Sub-components

Component	Element	Purpose
`Carousel`	`<div>`	Root container with context provider
`CarouselContent`	`<div>`	Scrollable content wrapper
`CarouselItem`	`<div>`	Individual slide
`CarouselPrevious`	`<button>`	Previous slide button
`CarouselNext`	`<button>`	Next slide button

Accessibility

The root element has role="region" and aria-roledescription="carousel".
Each CarouselItem has role="group" and aria-roledescription="slide".
Navigation buttons include visually hidden "Previous slide" / "Next slide" text for screen readers.
ArrowLeft and ArrowRight keyboard navigation scrolls the carousel.
Previous/Next buttons are automatically disabled when the carousel cannot scroll in that direction.
Add an aria-label to the root Carousel to identify it for screen reader users (e.g., aria-label="Product photos").

Carousel

On this page