Carousels are everywhere—hero banners, product galleries, onboarding flows—yet each UI kit bakes in a rigid variant system or forces you to wheel-reinvent prev/next logic, keyboard handlers, and auto-play pauses. Without a composable carousel, you rebuild animation state, tab-indexing, and step indicators across the app, diverge from the design system, and leave agents unable to step through programmatically.

Carousel is a controlled compound component with two variants: "directional" (prev/next buttons and dot step indicators) and "wizard" (back/next/finish buttons and numbered step progress). Controlled via activeIndex and onIndexChange, it exposes subcomponents Carousel.Panels, Carousel.Slide, Carousel.Controls, and Carousel.Steps. The root accepts autoPlay, interval, loop, and onFinish callback; each slide accepts an optional name prop for labeling steps; panels support transition="fade". Context-based child coordination via useCarousel() hook exposes next(), prev(), and goTo(index) navigation methods.

Import from @particle-academy/react-fancy, render <Carousel activeIndex={i} onIndexChange={setI} variant="directional"><Carousel.Panels><Carousel.Slide>Slide 1</Carousel.Slide><Carousel.Slide>Slide 2</Carousel.Slide></Carousel.Panels><Carousel.Controls /><Carousel.Steps /></Carousel>. Agents navigate via the goTo() method exposed by useCarousel() inside custom child components, or register step names using Carousel.Slide name="step label" for accessible wizard flows.