Carousel Stepper

CarouselStepper adds prev/next controls and slide indicators to a parent Carousel. Place it inside the carousel tree; choose layout=Bottom for a row under slides or layout=Inline to overlay the viewport. Override dots and arrows with custom children when defaults do not match your design.

  • Default stepping UI when you do not need custom carousel chrome
  • Bottom-aligned controls under the viewport (default layout)
  • Overlay arrows on the viewport sides and dot indicators along the bottom via layout=CarouselStepperLayout::Inline
  • Place inside a Carousel after CarouselViewport.
  • Choose layout for bottom or inline overlay positioning.
  • Override with custom children only when you need fully bespoke controls.
Default stepper

Bottom layout with previous/next buttons and page indicators.

Featured

Workspace overview

Step through highlights of the dashboard experience.

Inline overlay stepper

Arrows overlay the viewport sides; dot indicators sit along the bottom edge—useful for hero banners and image-forward carousels.

Campaign

Summer release

Inline steppers keep focus on the slide artwork.