Ring Carousel

hot

A 3D cylinder of cards — drag with inertia and snapping, arrow keys, or let it auto-spin. The front card gets data-front.

css-3ddraginertia2 files · 161 locdeps: clsx, tailwind-merge

PLATE 012026

PLATE 022026

PLATE 032026

PLATE 042026

PLATE 052026

PLATE 062026

PLATE 072026

PLATE 082026

PLATE 092026

PLATE 102026

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/ring-carousel.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs ring-carousel

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

<RingCarousel itemWidth={200}>{cards}</RingCarousel>

Prop	Type	Default	Description
itemWidth / gap	number	220 / 24	Card width and spacing (px) — radius is derived.
autoplay	number	8	Idle spin (deg/s); pauses on hover.
snap	boolean	true	Settle on the nearest card.
tilt / perspective	number	-8 / 1200	Camera tilt and perspective.