Carousel

Free

A swipeable carousel with momentum snapping, a focused center slide and screen reader announcements.

Ember Falls

World 01 · 12 levels

Glass Lagoon

World 02 · 9 levels

Moss Hollow

World 03 · 14 levels

Neon Bazaar

World 04 · 10 levels

Frost Spire

World 05 · 11 levels

Dune Sea

World 06 · 8 levels

Customize

Slide width0.72

Autoplay

Loop

Installation

npx shadcn@latest add https://ui.mekaigames.com/r/carousel.json

Works in any project set up with the shadcn CLI.

Install the dependency.
npm install motion
Copy the code from the Code tab into components/ui/carousel.tsx.

Usage

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

<Carousel
  label="Featured worlds"
  loop
  autoplay={4000}
  items={worlds.map((w) => ({ id: w.id, label: w.name, src: w.cover, alt: w.name }))}
/>

Props

15 properties

Property	Type	Default	Description
items	{ id?, src?, alt?, content?: ReactNode, label? }[]	—	Slides. Pass content for any markup, or src and alt for an image cover.
index	number	—	Controlled active slide. Leave it out to let the carousel manage itself.
defaultIndex	number	0	Starting slide when uncontrolled.
onIndexChange	(index: number) => void	—	Called when the active slide changes.
slideWidth	number	0.78	Slide width as a fraction of the viewport, 0.4 to 1. Neighbors peek in the rest.
gap	number	16	Space between slides in pixels.
aspectRatio	string	"16 / 10"	CSS aspect ratio of each slide.
loop	boolean	false	Wraps from the last slide back to the first, and the other way round.
autoplay	number \| false	false	Milliseconds per slide. Pauses on hover, focus and drag, and shows a pause button.
showArrows	boolean	true	Previous and next buttons.
showDots	boolean	true	One button per slide.
focusEffect	boolean	true	Scales the active slide up and fades its neighbors.
label	string	"Gallery"	Accessible name of the carousel.
color	string	"#ff784f"	Color of the active dot.
className	string	—	Extra classes for the wrapper.

Dependencies: motion

import { Carousel } from "@/components/ui/carousel"; <Carousel label="Featured worlds" loop autoplay={4000} items={worlds.map((w) => ({ id: w.id, label: w.name, src: w.cover, alt: w.name }))} />

Property

Type

Default

Description

items

{ id?, src?, alt?, content?: ReactNode, label? }[]

—

Slides. Pass content for any markup, or src and alt for an image cover.

index

number

—

Controlled active slide. Leave it out to let the carousel manage itself.

defaultIndex

number

Starting slide when uncontrolled.

onIndexChange

(index: number) => void

—

Called when the active slide changes.

slideWidth

number

0.78

Slide width as a fraction of the viewport, 0.4 to 1. Neighbors peek in the rest.

gap

number

Space between slides in pixels.

aspectRatio

string

"16 / 10"

CSS aspect ratio of each slide.

loop

boolean

false

Wraps from the last slide back to the first, and the other way round.

autoplay

number | false

false

Milliseconds per slide. Pauses on hover, focus and drag, and shows a pause button.

showArrows

boolean

true

Previous and next buttons.

showDots

boolean

true

One button per slide.

focusEffect

boolean

true

Scales the active slide up and fades its neighbors.

label

string

"Gallery"

Accessible name of the carousel.

color

string

"#ff784f"

Color of the active dot.

className

string

—

Extra classes for the wrapper.