Ring Gallery
A 3D carousel ring — cards stand on an invisible cylinder; drag to spin it with real inertia, let go and it coasts, idle and it slowly revolves.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/ring-gallery.json▸ Or install manually
- Install dependencies:
pnpm add motion - Copy the source from the Code tab above.
- Place it at
components/mellow/ring-gallery.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode[] | — | Card faces standing on the ring. |
| cardWidth | number | 210 | Card size in px. |
| cardHeight | number | 270 | Card height in px. |
| gap | number | 48 | Extra ring radius beyond the minimum, in px. |
| autoRotate | number | 5 | Idle rotation in deg/s — pauses on hover and drag. 0 disables. |
| segments | number | 10 | Vertical slices each card is bent into. 1 renders flat cards. |
| className | string | — | Additional CSS classes. |