Components
Carousel

Carousel

A fully customizable, motion and swipe-enabled carousel built with Embla, perfect for showcasing images, products, or content in a rotating display. It offers an engaging, interactive user experience while maintaining flexibility in both design and functionality to suit various use cases.

Documentation
1
2
3
4
5

Additional Examples

Sizes

To set the size of the items, you can use the basis utility class on the <CarouselItem />.

1
2
3
4
5

Spacing

To set the spacing between the items, you can use a pl-[VALUE] utility on the <CarouselItem /> and a negative -ml-[VALUE] on the <CarouselContent />.

1
2
3
4
5

Orientation

Use the orientation prop to set the orientation of the carousel.

1
2
3
4
5
<Carousel orientation="vertical | horizontal">
  <CarouselContent>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
  </CarouselContent>
</Carousel>

Plugins/ AutoPlay

1
2
3
4
5

You can use the plugins prop to add plugins to the carousel. See the Embla Carousel docs for more information on using plugins.

import Autoplay from "embla-carousel-autoplay"
 
export function Example() {
  return (
    <Carousel
      plugins={[
        Autoplay({
          delay: 2000,
        }),
      ]}
    >
      // ...
    </Carousel>
  )
}

Options

You can pass options to the carousel using the opts prop. See the Embla Carousel docs for more information.

<Carousel
  opts={{
    align: "start",
    loop: true,
  }}
>
  <CarouselContent>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
  </CarouselContent>
</Carousel>

API

Use a state and the setApi props to get an instance of the carousel API.

1
2
3
4
5
Slide 0 of 0

Events

You can listen to events using the api instance from setApi. See the Embla Carousel docs for more information.

import { type CarouselApi } from "@/components/ui/carousel"
 
export function Example() {
  const [api, setApi] = React.useState<CarouselApi>()
 
  React.useEffect(() => {
    if (!api) {
      return
    }
 
    api.on("select", () => {
      // Do something on select.
    })
  }, [api])
 
  return (
    <Carousel setApi={setApi}>
      <CarouselContent>
        <CarouselItem>...</CarouselItem>
        <CarouselItem>...</CarouselItem>
        <CarouselItem>...</CarouselItem>
      </CarouselContent>
    </Carousel>
  )
}

Configurable Props

See the Embla Carousel docs for more information on configurable props.

CardCharts