Components

Carousel

Drag-to-snap carousel: the track follows your pointer with elastic edges and settles on the nearest slide when released.

Snap

Fast settle, no wobble.

Drift

One gentle breath.

Glide

Long, weighty, deliberate.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add carousel

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Carousel } from "@lumora/ui/components/carousel";
// or from the barrel:
import { Carousel } from "@lumora/ui";

Props worth knowing

Each child is a slide. itemsPerView shows several at once — fractions peek the next edge — and gap spaces them in px. Drag to flick with elastic edges, or steer with the arrows, dots and keyboard; showArrows/showDots hide the chrome. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.