307

Wheel Picker

Previous

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

Docs
  • React
  • Vue
  • Angular
  • Svelte
"use client";

import * as React from "react";

About

The <WheelPicker /> component is built on top of react-wheel-picker.

Installation

pnpm dlx shadcn@latest add junwen-k/ui-x/wheel-picker

Usage

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

Examples

Default

  • React
  • Vue
  • Angular
  • Svelte
"use client";

import * as React from "react";

Form

Schedule your event
Let attendees know when your event takes place.

Schedule your event by selecting a time.

"use client";

import { getHours, getMinutes, setHours, setMinutes } from "date-fns";

API Reference

Styled wrappers around react-wheel-picker — see its API reference for the underlying props.

WheelPickerWrapper

Wraps WheelPickerWrapper with border and highlight styling. Place one or more <WheelPicker /> columns inside.

WheelPicker

Wraps WheelPicker with themed option and highlight classes, and accepts all of its props (options, value, onValueChange, infinite, visibleCount, …). The exported WheelPickerOption type describes the options items.