Carousel Motion

Installation

pnpm dlx shadcn@latest add https://carouselcn.marcellonovelli.com/r/carousel-motion.json

Usage

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNavigation,
  CarouselIndicator,
} from "@/components/ui/carousel-motion";

<Carousel>
  <CarouselContent>
    <CarouselItem>Slide 1</CarouselItem>
    <CarouselItem>Slide 2</CarouselItem>
    <CarouselItem>Slide 3</CarouselItem>
  </CarouselContent>
  <CarouselNavigation />
  <CarouselIndicator />
</Carousel>

Examples

Basic

Custom Indicator

Use controlled state with index and onIndexChange to build custom indicators.

Loop

Enable looping with the loop prop. When reaching the last slide, navigating forward jumps back to the first slide.

Vertical

Use orientation="vertical" for vertical sliding. The container must have an explicit height.

Sizes and Spacing

Use -ml-4 on CarouselContent and pl-4 on CarouselItem to add spacing between items. Use basis-1/3 (or other values) to show multiple items at once.

Autoplay

Use the useCarouselAutoplay hook to automatically advance slides. The hook provides play, pause, and toggle controls.

Spring Customization

Customize the spring physics by passing a transition prop to CarouselContent. Adjust stiffness and damping to control the animation feel.

API Reference

Carousel

The root component that provides context for the carousel.

CarouselContent

Container for carousel items with drag and spring animation support.

CarouselItem

Individual slide wrapper.

CarouselNavigation

Previous/next navigation buttons.

CarouselIndicator

Dot indicators showing current slide position.

useCarousel

Hook to access carousel state and controls.

const { index, setIndex, itemsCount } = useCarousel();

useCarouselAutoplay

Hook to enable automatic slide advancement.

const { isPlaying, play, pause, toggle } = useCarouselAutoplay({
  interval: 3000,
  autoStart: true,
});

Returns:

Comparison with Carousel (CSS)

This component uses Motion (Framer Motion) for spring-based animations. Choose this version if:

• You want smoother, physics-based animations
• You need fine-grained control over animation timing (stiffness, damping)
• You're already using Motion in your project

For a lighter bundle without animation dependencies, consider using Carousel which uses CSS transitions.