Premium & Brand

Carousel

Scroll-snap slide gallery with prev/next, dots and keyboard nav.

Import

tsx

import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, CarouselDots } from "@cooud-ui/ui";

bash

npx cooud-ui add carousel

Examples

Slides

Native scroll-snap gallery — swipe or drag on touch, prev/next + dots and full keyboard support on desktop, reduced-motion handled by the OS. Set `basis` on CarouselItem for multi-up views.

1Onboarding

2Checkout

3Repasse

4Insights

5Growth

tsx

<Carousel className="w-full max-w-sm" opts={{ align: "start" }}>
  <CarouselContent>
    {slides.map((slide) => (
      <CarouselItem key={slide.id}>
        <div className="flex h-40 items-center justify-center rounded-xl border border-border bg-surface-raised">
          <span className="font-display text-4xl font-semibold text-fg">{slide.n}</span>
        </div>
      </CarouselItem>
    ))}
  </CarouselContent>
  <div className="mt-4 flex items-center justify-center gap-3">
    <CarouselPrevious />
    <CarouselDots />
    <CarouselNext />
  </div>
</Carousel>

API Reference

Generated from the component's exported types.

CarouselProps

Extends Omit<HTMLAttributes<HTMLDivElement>, "onScroll">

Prop	Type	Default	Description
`opts`	`CarouselOptions`	—	Tuning for snap alignment and looping.
`children`	`ReactNode`	—	—

CarouselContentProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`children`	`ReactNode`	—	—

CarouselItemProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`children`	`ReactNode`	—	—

CarouselPreviousProps

Extends ButtonHTMLAttributes<HTMLButtonElement>

No own props — see the extended type above for available props.

CarouselNextProps

Extends ButtonHTMLAttributes<HTMLButtonElement>

No own props — see the extended type above for available props.

CarouselDotsProps

Extends HTMLAttributes<HTMLDivElement>

No own props — see the extended type above for available props.