Component

Carousel

A drag-driven, spring-snapping row of slides with a peek of the next one, built on a native gesture binding rather than browser scroll-snap.

The primitive

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

Account 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>
  <AccountStatCard stat="balance" />
  <AccountStatCard stat="spent" />
</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	—