All components
Carousel
Sliding panels with previous and next controls and clickable indicator dots.
Install
zsh — carousel
1bunx stylexblocks add carouselUsage — Ark UI
carousel.tsx
123456789101112131415161718192021222324252627282930import { Carousel } from "#components/ui/ark-ui/carousel.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
const slides = ["Mountains", "Coastline", "Forest"];
export function Example() { return ( // the real Ark Carousel machine wearing the recipe styles — it owns // page state, drag behavior, and aria; the active dot fills from the // palette automatically <Carousel.Root slideCount={slides.length} allowMouseDrag palette={indigoPalette}> <Carousel.ItemGroup> {slides.map((label, index) => ( <Carousel.Item key={label} index={index}> {label} </Carousel.Item> ))} </Carousel.ItemGroup> <Carousel.Control> <Carousel.PrevTrigger>‹</Carousel.PrevTrigger> <Carousel.IndicatorGroup> {slides.map((label, index) => ( <Carousel.Indicator key={label} index={index} /> ))} </Carousel.IndicatorGroup> <Carousel.NextTrigger>›</Carousel.NextTrigger> </Carousel.Control> </Carousel.Root> );}