Component
Carousel
A drag-driven, spring-snapping row of slides with a peek of the next one, settling cleanly on each position as you swipe.
Standalone
Slide 1
Slide 2
Slide 3
carousel.tsx
<NativeCarousel>
<div className="rounded-2xl bg-muted p-6">Slide 1</div>
<div className="rounded-2xl bg-muted p-6">Slide 2</div>
<div className="rounded-2xl bg-muted p-6">Slide 3</div>
</NativeCarousel>Example
Stat cards on a home screen, each one a peek-width slide away from the next.
Balance
$4,280.00+2.4%Spent
$1,120.00-0.8%carousel-example.tsx
<NativeCarousel>
<NativeStat label="Balance" value="$4,280.00" sublabel="+2.4%" trend="up" />
<NativeStat label="Spent" value="$1,120.00" sublabel="-0.8%" trend="down" />
</NativeCarousel>Capabilities
| Prop | Type | Description |
|---|---|---|
| childrenrequired | React.ReactNode[] | - |
| slideWidth | number | string | Width of each slide - defaults to 85% of container |
| gap | number | - |
| showDots | boolean | Show dot pagination |
| peekWidth | number | Peek amount of next slide |
| className | string | - |