Wheel Picker

Component 67

About

iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Wheel Picker to your project and fits it to your theme.

Code

How Wheel Picker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import type { WheelPickerOption } from "@/components/ui/wheel-picker";
import { WheelPicker, WheelPickerWrapper } from "@/components/ui/wheel-picker";

const createArray = (length: number, add = 0): WheelPickerOption[] =>
  Array.from({ length }, (_, i) => {
    const value = i + add;
    return {
      label: value.toString().padStart(2, "0"),
      value: value.toString(),
    };
  });

const hourOptions = createArray(12, 1);
const minuteOptions = createArray(60);
const meridiemOptions: WheelPickerOption[] = [
  { label: "AM", value: "AM" },
  { label: "PM", value: "PM" },
];

function WheelPickerDemo() {
  return (
    <div className="flex w-full h-screen justify-center items-center">
      <div className="w-56">
        <WheelPickerWrapper>
          <WheelPicker options={hourOptions} infinite />
          <WheelPicker options={minuteOptions} infinite />
          <WheelPicker options={meridiemOptions} />
        </WheelPickerWrapper>
      </div>
    </div>
  );
}

export {
  WheelPickerDemo
}