Components

Carousel

A shadcn-style card carousel with swipeable slides and external next or previous controls.

Tap to show a QR code for the Expo showcase deep link. The web preview below runs in the browser.

Launch faster

Ship polished mobile surfaces with shared registry primitives and mirrored docs.

Preview in context

Swipe across onboarding, marketing, or product cards without leaving the screen.

Reuse everywhere

Keep the same API across Expo demos, registry exports, and the platform site.

Swipe or click through

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

Run the registry command below to add carousel to your project.

watermelon add carousel

Import Carousel from your local UI registry output.

Import

import { Carousel } from "@/components/ui/carousel";

import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@/components/ui/carousel";

Carousels work well for swipeable feature cards, onboarding steps, and compact content rails that still need clear external controls.

Starter template

A shadcn-style card slide that feels at home on mobile and web.

Shared tokens

A shadcn-style card slide that feels at home on mobile and web.

Touch-friendly

A shadcn-style card slide that feels at home on mobile and web.

Feature spotlight

prop	type	default	description
defaultIndex / index	number	0	Sets the active slide in uncontrolled or controlled mode.
loop	boolean	false	When true, next and previous controls wrap around the slide list.
onIndexChange	(index: number) => void	-	Called whenever the active slide changes.