A draggable circular carousel that arranges image thumbnails around an orbit, with momentum, snap-to-item, auto-rotate, and keyboard navigation.
"use client";
import type { OrbitalImageWheelItem } from "@/components/ui/orbital-image-wheel";
import OrbitalImageWheel from "@/components/ui/orbital-image-wheel";
const items: OrbitalImageWheelItem[] = [
{
id: "amber-violet",
alt: "Amber and violet abstract color fields",
image:
"https://cdn.21st.dev/assets/localized/ae77f366b082cc96af4caea79444770bf648e3b06221950f3415b3a3fcf6bb18.jpg",
label: "amber violet",
},
{
id: "cobalt-pink",
alt: "Cobalt blue and pink abstract color fields",
image:
"https://cdn.21st.dev/assets/localized/7df6eec8a4adce04463c7cf1571a245c53e88da0e033ca1e3015e57afe9be897.jpg",
label: "cobalt pink",
},
{
id: "coral-lavender",
alt: "Coral and lavender abstract color fields",
image:
"https://cdn.21st.dev/assets/localized/f7c32cf78f4fae0b3994bc85eef90b4f1d1368a6bcda9fdb55687313bbd8faef.jpg",
label: "coral lavender",
},
{
id: "cyan-tangerine",
alt: "Cyan and tangerine abstract color fields",
image:
"https://cdn.21st.dev/assets/localized/3ac8ae4d0598b8aaa1c99589d8aa434725ef882f0b67ddf94470a1f0053319cf.jpg",
label: "cyan tangerine",
},
{
id: "coral-cyan",
alt: "Coral and cyan heavily blurred color fields with fine grain",
image:
"https://cdn.21st.dev/assets/localized/5c7adee04308a99a62546f90a991bfc26a9f9ca492684a74408efd3d9f3dfe38.jpg",
label: "coral cyan",
},
{
id: "violet-tangerine",
alt: "Violet and tangerine heavily blurred color fields with fine grain",
image:
"https://cdn.21st.dev/assets/localized/fe23ef28e05761801aa64d8ea963c8671b7098a883c638ffce96b9e119909409.jpg",
label: "violet tangerine",
},
{
id: "teal-apricot",
alt: "Teal and apricot heavily blurred color fields with fine grain",
image:
"https://cdn.21st.dev/assets/localized/337166c5afc1d6f73b147026dc2880b4da5fb7f18f187ae9f305db4b2c744023.jpg",
label: "teal apricot",
},
{
id: "plum-coral",
alt: "Plum and coral heavily blurred color fields with fine grain",
image:
"https://cdn.21st.dev/assets/localized/0d1f71c1ee25c5f405f29db7303126f73fec91539f5fc2b420c1b899cce50aff.jpg",
label: "plum coral",
},
];
export default function OrbitalImageWheelDemo() {
return (
<div className="mx-auto flex w-full max-w-lg flex-col items-center gap-4 px-4 py-8">
<OrbitalImageWheel autoRotate autoRotateSpeed={10} items={items} snap />
<p className="text-muted-foreground text-xs">
Drag to spin, or focus an item and use Arrow Left / Right.
</p>
</div>
);
}
Part of SmoothUI — browse the full library on 21st.dev.