Carousel

A carousel with motion and swipe, built with Embla. Supports sizes, spacing, orientation, and the Embla API.

Default

A basic carousel with previous and next controls.

Installation

CLI

npx @sonojs/ui@latest add carousel

Also needsnpx @sonojs/ui@latest add button && npm i embla-carousel-react lucide-react

Usage

carousel.tsx

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

export function Example() {
  return (
    <Carousel>
      <CarouselContent>
        <CarouselItem>One</CarouselItem>
        <CarouselItem>Two</CarouselItem>
        <CarouselItem>Three</CarouselItem>
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}

Props

Prop	Type	Default	Description
opts	CarouselOptions	—	Embla options such as align, loop, and direction.
orientation	"horizontal" · "vertical"	"horizontal"	Scroll axis of the carousel.
plugins	CarouselPlugin	—	Embla plugins (for example Autoplay).
setApi	(api: CarouselApi) => void	—	Receives the Embla API once the carousel is ready.