Data display

Carousel

Slides you swipe or step through, with dots and an autoplay people can stop.

Ant Design: Carousel

import { Carousel } from '@alea/ui';

Examples

Arrows, dots, swipe; autoplay stops on hover, focus and with the button.

Full color systems as Figma variables.

perView shows more than one at once.

#CD57FF

#8B6CF0

#FFCE1F

Slides you swipe or step through, with dots and an optional autoplay that people can pause (Ant's Carousel, WAI-ARIA carousel pattern).

Prop	Type	Default	Description
`aria-label`required	`string`	-	Name of the carousel for screen readers.
`children`required	`ReactNode[]`	-	The slides.
`autoplay`	`number`	-	Moves on by itself every n ms (pauses on hover, focus and with reduced motion; has a pause button).
`className`	`string`	-	Extra class names for the root element.
`perView`	`number`	`1`	Slides visible at once. Default 1.
`showDots`	`boolean`	`true`	Show the dots. Default true.

The WAI-ARIA carousel pattern: a labelled region of slides, "n of m".
Autoplay stops on hover and focus, never runs with reduced motion, and has a stop button.
Slides out of view are inert.

Key	Does
`Tab`	Focuses the slides, then the controls
`Arrow Left` / `Right`	Previous or next slide
`Space`	Pauses autoplay (on the pause button)

Don't