Ring Carousel

Pro

Cards on a 3D ring that turns by drag, arrows or a sideways swipe, with the front card in focus.

Ember Falls

12 levels

Glass Lagoon

9 levels

Moss Hollow

14 levels

Neon Bazaar

10 levels

Frost Spire

11 levels

Dune Sea

8 levels

Clockwork Isle

13 levels

Starfall Ridge

15 levels

Customize

Cards8

Tilt10°

Auto-rotate

Installation

Ring Carousel is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy ring-carousel.tsx into components/ui and run npm install motion.

See Pro pricing

Usage

import { RingCarousel } from "@/components/ui/ring-carousel";

<RingCarousel
  label="Character select"
  autoRotate
  items={heroes.map((h) => ({ id: h.id, label: h.name, src: h.portrait, alt: h.name }))}
  onIndexChange={(i) => setPreview(heroes[i])}
/>

Props

13 properties

Property	Type	Default	Description
items	{ id?, src?, alt?, content?: ReactNode, label? }[]	—	Cards. Pass content for any markup, or src and alt for an image cover.
defaultIndex	number	0	Card that starts at the front.
onIndexChange	(index: number) => void	—	Called whenever a different card reaches the front.
cardWidth	number	170	Card width in pixels.
cardHeight	number	cardWidth × 1.35	Card height in pixels.
radius	number	—	Ring radius in pixels. Worked out from the card count and width when omitted.
tilt	number	10	Camera angle above the ring, in degrees.
perspective	number	1200	CSS perspective distance in pixels.
autoRotate	boolean	false	Turns slowly while nobody is interacting. Off with reduced motion.
autoRotateSpeed	number	14	Degrees per second when auto-rotating.
showArrows	boolean	true	Previous and next buttons with a counter.
label	string	"Gallery"	Accessible name of the carousel.
className	string	—	Extra classes for the wrapper.

Dependencies: motion