Snap carousel whose page dots stretch as you swipe, while side pages fade back so each new one feels like it’s arriving. Supports pinch and double-tap zoom.

Preview

TSX components/ui/carousel/carousel.tsx

Pro source · 569 lines

Part of LumioUI Pro. With Pro, the full file shows here and npx @lumioui/cli add pro/carousel writes it into your repo. Unlocking your Pro source… Couldn't load the source. Refresh to try again.

See Pro Log in

Upgrade to Pro

TSX example.tsx

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

export function Example() {
  return (
    <Carousel />
  );
}

Installation

$npx @lumioui/cli add pro/carousel

Install the dependencies
npx expo install react-native-reanimated
Add the components it builds on
glass
Copy the source from the Code tab into your project
components/ui/carousel/carousel.tsxcomponents/ui/carousel/index.ts
Update the import paths to match your project setup.

Usage

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

<Carousel />

Achievement BadgePro Award medallion that shows progress while locked and its tier metal once earned. Unlocking closes the ring, fills the face and pops with a glow in its colour and a haptic. Tile, row and medal layouts. Action BarPro Docked bottom bar for detail screens with a price or summary and one main action. Its optional confirm button turns into a check that shows the result in place. Solid or glass styles. Activity RingsPro One to three concentric goal rings that fill in a quick cascade and lap again past 100%. Closing a ring makes it glow brightly before settling, as a small reward. Room in the centre for a figure. Add to Cart ButtonPro Add button that becomes its own result: busy dots while adding, a check and “In bag”, then a quantity stepper with a trash icon at one. A compact version stretches open over product photos. Address CardPro Saved address card with a Home or Work label, default badge, contact details and an optional street-map tile. Picking one highlights the card and drops its pin on the map. Includes an add-new tile. Agenda ListPro Day-grouped agenda that follows the clock: past events fade back, the event in progress is highlighted as it runs, and a thin line marks the present moment and moves along with it.

Previous Card Next Cart Item

On this page

Installation Usage Related

Part of LumioUI Pro

Installs with a license key. Full source lands in your repo, yours to change.

Set up Pro