Carousel
A responsive, accessible slider and scroll-track carousel supporting container alignment, edge gradient fades, and pagination.
// Plain markup
import { Carousel, CarouselControls, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious, CarouselTrack } from "@shavin/ui";Cards Track with Navigation Controls
Featured Primitives
Component Source
<Carousel variant="cards" alignToContainer="lg" fadeEdges>
<div className="flex items-center justify-between mb-4">
<Heading size="md">Featured Items</Heading>
<Carousel.Controls>
<Carousel.Previous />
<Carousel.Next />
</Carousel.Controls>
</div>
<Carousel.Track gap="4">
{items.map((item, idx) => (
<Carousel.Item key={idx} className="w-[280px]">
<Card className="p-4 flex flex-col gap-2">
<Heading size="sm">{item.title}</Heading>
<Text size="sm" color="subtle">{item.desc}</Text>
</Card>
</Carousel.Item>
))}
</Carousel.Track>
</Carousel>Slider Mode (Paginated Slide Sequence)
Component Source
<Carousel variant="slider" onSlideChange={setSlide}>
<Carousel.Track>
{slides.map((slide, idx) => (
<Carousel.Item key={idx}>
<div className="h-48 rounded-[var(--radius-panel)] bg-surface-hover/40 border border-hairline flex items-center justify-center p-6 text-center">
<Heading size="lg">{slide.title}</Heading>
</div>
</Carousel.Item>
))}
</Carousel.Track>
<Carousel.Dots count={5} />
</Carousel>Props Specification
| Prop | Type | Default | Description |
|---|---|---|---|
| alignToContainer | ContainerSize | none | Alignment of track start/end to a standard Shavin container size. Default "none". |
| fadeEdges | boolean | false | Whether to render subtle gradient edge fade overlays on the track boundaries. Default false. |
| scrollStep | number | 340 | Custom scroll step in pixels for cards variant. Default 340. |
| autoPlayInterval | number | disabled | Auto-scroll interval in ms (slider mode only). Default disabled. |
| onSlideChange | (index: number) => void | — | Callback fired when active slide index changes. |
| variant | "slider" | "cards" | "cards" | — |