Carousel

Zero-dependency scroll-snap carousel: edge-aware arrows, dots, drag, keyboard, optional autoplay, and responsive slides-per-view.

import { Carousel } from "@naraya-ai/ui";

Examples

Simple — one slide per view

Pass arrows / dots and drop slides as children. Arrows hide at the ends (non-loop default).

Slide 1

Slide 2

Slide 3

Slide 4

<Carousel arrows dots aria-label="Basic carousel">
  <Slide /> <Slide /> <Slide /> <Slide />
</Carousel>

Responsive slidesPerView

1 on mobile, 2 on sm, 3 on lg. Resize the window.

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

<Carousel arrows slidesPerView={{ base: 1, sm: 2, lg: 3 }} gap="4">
  {cards.map((c) => <Card key={c.id}>{…}</Card>)}
</Carousel>

Loop + autoplay (compound API)

Compose the parts yourself. Loop enables wrap + autoplay; autoplay pauses on hover/focus and under reduced motion.

Hero 1

Hero 2

Hero 3

<Carousel loop autoPlay interval={3000}>
  <Carousel.Slide><Hero /></Carousel.Slide>
  <Carousel.Slide><Hero /></Carousel.Slide>
  <Carousel.Prev /> <Carousel.Next />
  <Carousel.Dots />
</Carousel>

Props (root)

Prop	Type	Default	Description
index / defaultIndex	`number`	`0`	Controlled / uncontrolled active slide.
onIndexChange	`(index: number) => void`	—	Fires on any slide change.
slidesPerView	`number \| { base?, sm?, md?, lg?, xl?, 2xl? }`	`1`	Slides visible at once (responsive).
gap	`"0".."12"`	`"4"`	Spacing-scale gap between slides.
align	`"start" \| "center"`	`"start"`	Snap alignment.
loop	`boolean`	`false`	Wrap past the ends; enables autoplay; arrows never disable.
autoPlay / interval	`boolean / number`	`false / 5000`	Auto-advance (requires loop).
arrows / dots	`boolean`	`false`	Auto-render controls (simple API).
arrowPosition	`"inside" \| "outside"`	`"inside"`	Auto-arrow placement.
draggable	`boolean`	`true`	Mouse drag-to-scroll (touch is native).

Compound parts

Prop	Type	Default	Description
Carousel.Slide	`element`	—	Optional semantic slide wrapper.
Carousel.Prev / .Next	`element`	—	Arrow buttons (edge-aware).
Carousel.Dots	`element`	—	Dot indicators.

Carousel

Examples

Props (root)

Compound parts

Accessibility

Related