About
A draggable, iPod-style circular click wheel control with inertial spring physics, detent ticks, and a scrolling item list for selecting from a list of options.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Click Wheel to your project and fits it to your theme.
Code
How Click Wheel is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import ClickWheel from "@/components/ui/click-wheel";
export default function ClickWheelDemo() {
const items = [
{ id: "songs", label: "Songs" },
{ id: "artists", label: "Artists" },
{ id: "albums", label: "Albums" },
{ id: "playlists", label: "Playlists" },
{ id: "podcasts", label: "Podcasts" },
{ id: "settings", label: "Settings" },
];
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-10">
<ClickWheel items={items} ariaLabel="Click wheel menu" />
</div>
);
}