Carousel

Carousels show a collection of items that can be scrolled on and off the screen.

Developer experience

Only CarouselItem children are rendered; other children are ignored.
Use index/onIndexChange for controlled positioning, or defaultIndex to seed the initial position of an uncontrolled carousel.

The root is a region with aria-roledescription="carousel"; provide an accessible name via aria-label on the component.
Each item is a group with aria-roledescription="slide" and an aria-label of the form "n / total".
Roving tabIndex keeps a single item in the tab order; Arrow/Home/End move the selection and center the focused slide.

Responsive behavior on mobile is not supported.
Only the hero variant is implemented. center-aligned, multi-browse, un-contained, and full-screen are reserved in the type for future Material 3 layout support and currently render as hero.

React props
Name	Type	Required	Default	Description
`className`	`string \| Partial<Record<"track" \| "carousel", string>> \| ClassNameComponent<CarouselInterface>`	No	`—`	Root classes (string), static element classes (object), or state-aware element classes (function).
`variant`	`"hero" \| "center-aligned" \| "multi-browse" \| "un-contained" \| "full-screen"`	No	`'hero'`	Carousel layout variant. Only `hero` is implemented today; the other Material 3 arrangements are reserved and will be supported in the future.
`gap`	`number`	No	`8`	Gap between items, in pixels.
`scrollSensitivity`	`number`	No	`1.25`	Adjusts scroll/drag responsiveness.
`outputRange`	`[number, number]`	No	`[42, 300]`	Min/max item width, in pixels.
`index`	`number`	No	`—`	Index of the centered item. A value other than `undefined` makes the carousel controlled: it becomes the single source of truth and user interaction only notifies via `onIndexChange` instead of moving the carousel locally.
`defaultIndex`	`number`	No	`0`	Initial centered index for uncontrolled usage.
`onIndexChange`	`(index: number) => void`	No	`—`	Called once for each accepted centered-index transition.
`onMetricsChange`	`(metrics: CarouselMetrics) => void`	No	`—`	Receive live metrics to better control the carousel externally