All components
Carousel
Sliding panels with previous and next controls and clickable indicator dots.
1Mountains
2Coastline
3Forest
Install
zsh — carousel
1bunx stylexblocks add carouselUsage — Base UI
carousel.tsx
12345678910111213141516171819202122232425262728293031import { Carousel } from "#components/ui/base-ui/carousel.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
const slides = ["Mountains", "Coastline", "Forest"];
export function Example() { return ( // Base UI ships no carousel machine — Root owns a small controlled page // index (slideCount, defaultPage, page, onPageChange) and the parts are // composed with useRender: only the active Item shows, triggers disable // at the ends, dots select directly, and everything accepts `render` <Carousel.Root slideCount={slides.length} 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> );}