AwesomeRingCarousel

A 3D ring carousel React component.

Install

npm install awesome-ring-carousel

Usage

import React from 'react';
import { AwesomeRingCarousel } from 'awesome-ring-carousel';
import 'awesome-ring-carousel/style.css';

const slides = [
  { title: 'AI Analytics', description: 'Machine learning insights', tag: 'AI' },
  { title: 'Cloud Infra', description: 'Auto-scaling systems', tag: 'Cloud' },
  { title: 'Realtime', description: 'Stream processing', tag: 'Live' },
];

export default function Demo() {
  return (
    <div style={{ width: '100%', height: 320 }}>
      <AwesomeRingCarousel data={slides} />
    </div>
  );
}

Props

AwesomeRingCarousel props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | data | SlideData[] | — | Items to render. | | radius | number | 'responsive' | 'responsive' | Ring radius in px or responsive mode. | | autoRotate | boolean | true | Auto-rotate the ring. | | rotationSpeed | number | 0.3 | Autoplay rotation speed. | | rotationAxis | 'x' \| 'y' \| 'both' | — | Reserved for future axis control. | | inertia | boolean | true | Keep momentum after drag. | | friction | number | 0.92 | Inertia decay (lower = more friction). | | focusGlow | boolean | true | Glow/shadow on focused item. | | theme | 'dark' \| 'light' \| 'neon' \| 'glass' | 'dark' | Visual theme. | | motionPreset | 'orbit' \| 'galaxy' \| 'floating' | — | Reserved for future motion presets. | | itemLayout | 'card' \| 'image' \| 'glass-card' | 'card' | Card layout style. | | hoverEffect | 'zoom' \| 'tilt' \| 'lift' \| 'none' | 'lift' | Hover transform effect. | | perspective | number | 900 | CSS perspective in px. | | renderItem | (item, index, isFocused) => ReactNode | — | Custom item renderer. | | onFocusChange | (index) => void | — | Called when the focused item changes. | | className | string | — | Class on the root container. |

SlideData shape

| Prop | Type | Default | Description | | --- | --- | --- | --- | | title | string | — | Item title. | | description | string | — | Item description. | | image | string | — | Image URL. | | onClick | () => void | — | Click handler for the item. | | imageClick | () => void | — | Deprecated. Use onClick. | | tag | string | — | Small label in the corner. | | color | string | — | Placeholder image color. |

Examples (JSX only)

1) Complete Example - Try changing themes

import React from 'react';
import { AwesomeRingCarousel } from 'awesome-ring-carousel';
import 'awesome-ring-carousel/style.css';

const DEMO_SLIDES = [
  {
    title: "AI Analytics",
    description: "Advanced machine learning insights at scale",
    tag: "AI",
    color: "#020d2e",
    onClick: () => alert("AI Analytics clicked!"),
  },
  {
    title: "Real Time Data",
    description: "Stream processing & live pipeline monitoring",
    tag: "Live",
    color: "#0a1628",
    onClick: () => alert("Real Time Data clicked!"),
  },
  {
    title: "Cloud Infra",
    description: "Auto-scaling distributed architecture",
    tag: "Cloud",
    color: "#0d1f0a",
    onClick: () => alert("Cloud Infra clicked!"),
  },
  {
    title: "Cybersecurity",
    description: "Zero-trust threat detection & response",
    tag: "Secure",
    color: "#1a0a0a",
    onClick: () => alert("Cybersecurity clicked!"),
  },
  {
    title: "Neural Nets",
    description: "Deep learning model training pipelines",
    tag: "ML",
    color: "#120a2e",
    onClick: () => alert("Neural Nets clicked!"),
  },
  {
    title: "Data Viz",
    description: "Interactive charts & dashboard studio",
    tag: "Viz",
    color: "#0a1e2e",
    onClick: () => alert("Data Viz clicked!"),
  },
  {
    title: "Edge Deploy",
    description: "Deploy models to edge devices globally",
    tag: "Edge",
    color: "#0a1a10",
    onClick: () => alert("Edge Deploy clicked!"),
  },
  {
    title: "API Gateway",
    description: "Manage, throttle & monitor your APIs",
    tag: "API",
    color: "#1e0a2e",
    onClick: () => alert("API Gateway clicked!"),
  },
  {
    title: "Vector DB",
    description: "Billion-scale embedding search engine",
    tag: "DB",
    color: "#001820",
    onClick: () => alert("Vector DB clicked!"),
  },
  {
    title: "LLM Studio",
    description: "Fine-tune and prompt large language models",
    tag: "LLM",
    color: "#080022",
    onClick: () => alert("LLM Studio clicked!"),
  },
];

export default function App() {
  return (
    <div style={{ width: "100%", height: "320px" }}>
      <AwesomeRingCarousel
        data={DEMO_SLIDES}
        radius="responsive"
        autoRotate
        rotationSpeed={0.08}
        inertia
        friction={0.94}
        focusGlow
        theme="dark"
        itemLayout="card"
        hoverEffect="lift"
        perspective={900}
      />
    </div>
  );
}

1) Minimal

import React from 'react';
import { AwesomeRingCarousel } from 'awesome-ring-carousel';
import 'awesome-ring-carousel/style.css';

const data = [
  { title: 'Alpha' },
  { title: 'Beta' },
  { title: 'Gamma' },
  { title: 'Delta' },
];

export default function Minimal() {
  return (
    <div style={{ width: '100%', height: 260 }}>
      <AwesomeRingCarousel data={data} />
    </div>
  );
}

2) Custom Render

import React from 'react';
import { AwesomeRingCarousel } from 'awesome-ring-carousel';
import 'awesome-ring-carousel/style.css';

const data = [
  { title: 'Apollo', description: 'Mission Control' },
  { title: 'Nova', description: 'Signal Processing' },
  { title: 'Orion', description: 'Deep Space Ops' },
];

export default function CustomRender() {
  return (
    <div style={{ width: '100%', height: 300 }}>
      <AwesomeRingCarousel
        data={data}
        renderItem={(item, index, isFocused) => (
          <div
            style={{
              width: 160,
              height: 90,
              borderRadius: 14,
              padding: 12,
              background: isFocused ? '#0f172a' : '#111827',
              color: '#e2e8f0',
              border: '1px solid rgba(255,255,255,0.12)'
            }}
          >
            <div style={{ fontWeight: 700 }}>{item.title}</div>
            <div style={{ fontSize: 12, opacity: 0.75 }}>{item.description}</div>
            <div style={{ fontSize: 10, opacity: 0.6 }}>#{index + 1}</div>
          </div>
        )}
      />
    </div>
  );
}

3) Image Layout + Theme

import React from 'react';
import { AwesomeRingCarousel } from 'awesome-ring-carousel';
import 'awesome-ring-carousel/style.css';

const data = [
  { title: 'Lake', image: 'https://picsum.photos/200?1' },
  { title: 'City', image: 'https://picsum.photos/200?2' },
  { title: 'Forest', image: 'https://picsum.photos/200?3' },
  { title: 'Desert', image: 'https://picsum.photos/200?4' },
];

export default function ImageTheme() {
  return (
    <div style={{ width: '100%', height: 260 }}>
      <AwesomeRingCarousel
        data={data}
        itemLayout="image"
        theme="glass"
        hoverEffect="zoom"
        perspective={1000}
      />
    </div>
  );
}

Styling

Import awesome-ring-carousel/style.css to enable hover effects and focus outlines. The component uses CSS variables --font-display and --font-body. Override them in your app if you want custom fonts.