React Wheel Picker

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

About

The Wheel Picker component is built on top of React Wheel Picker.

📱 Natural touch scrolling with smooth inertia effect
🖱️ Mouse drag and scroll support for desktop
🔄 Infinite loop scrolling
🎨 Unstyled components for complete style customization
⚡️ Easy installation via shadcn CLI

Installation

pnpm dlx shadcn add @ncdai/wheel-picker

Usage

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

const options: WheelPickerOption[] = [
  {
    label: "React",
    value: "react",
  },
  {
    label: "Vue",
    value: "vue",
  },
  {
    label: "Angular",
    value: "angular",
  },
  {
    label: "Svelte",
    value: "svelte",
  },
];
 
export function WheelPickerDemo() {
  const [value, setValue] = useState("react");
 
  return (
    <WheelPickerWrapper>
      <WheelPicker options={options} value={value} onValueChange={setValue} />
    </WheelPickerWrapper>
  );
}

See the React Wheel Picker documentation for more information.

Examples

Multiple Pickers, Infinite Loop

Open in

React Hook Form

Open in