Carousel
betaA row of items you scroll through, one or several at a time: native swipe and snap, previous/next, dots, arrow keys, and rotation only when asked.
- Display
- 1 file
- 1 npm package
- Accessibility notes
pnpm dlx @dowel-ui/cli add carouselnpm packages installed: class-variance-authority.
import { Carousel } from "@/components/ui/carousel";Default
Several At Once
Rotating
Vertical
<Carousel>
| Prop | Type | Default |
|---|---|---|
label (required)What the carousel holds, e.g. "Featured products". Names the region for screen readers. | string | — |
autoplayAdvance on a timer. Pair it with | boolean | false |
defaultIndexThe position it starts at, uncontrolled. Default 0. | number | 0 |
gapSpace between items, in pixels. Default 16. | number | 16 |
indexThe position (first visible item), controlled. | number | — |
intervalTime on each position while rotating, in milliseconds. Default 5000. | number | 5000 |
itemsPerViewItems showing at once. Each item's width (or height) is set from it. Default 1. | number | 1 |
loopPrevious at the start goes to the end, and next at the end to the start. Default false. | boolean | false |
onIndexChange | (index: number) => void | — |
orientation | "horizontal" | "vertical" | "horizontal" |
Plus every attribute of <section> except onChange.
<CarouselViewport>
Plus every attribute of <div>.
<CarouselItem>
Plus every attribute of <div>.
<CarouselPrevious>
| Prop | Type | Default |
|---|---|---|
onClick | ButtonProps["onClick"] | — |
<CarouselNext>
| Prop | Type | Default |
|---|---|---|
onClick | ButtonProps["onClick"] | — |
<CarouselDots>
Plus every attribute of <div>.
<CarouselPlayPause>
| Prop | Type | Default |
|---|---|---|
onClick | ButtonProps["onClick"] | — |
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes