Click Wheel

Component 1

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>
  );
}