edbnedbn/ui
Get Started
WelcomeChoosing a VariantChangelogLicense
Components
OverviewButtonAlert DialogPopoverDropdown MenuPull Down MenuSheetWheel Picker
Motion Utilities
Motion ProviderSpring PresetsHooks
0installs
Components
BlocksMaps
GitHub stars
HomeDocsComponentsAnimatedWheel Picker

On this page

Wheel Picker

iOS-style wheel picker with smooth inertia scrolling and infinite loop support.

  • Next.js
  • Vite
  • Remix
  • Astro
  • Nuxt
  • SvelteKit
  • Gatsby
  • Next.js
  • Vite
  • Remix
  • Astro
  • Nuxt
  • SvelteKit
  • Gatsby

Installation

Terminal
npx shadcn@latest add https://ui.edbn.me/r/wheel-picker.json
This component requires @ncdai/react-wheel-picker which is installed automatically via the registry.

Usage

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

const options: WheelPickerOption[] = [
  { label: "Next.js", value: "nextjs" },
  { label: "Vite", value: "vite" },
];

export function Demo() {
  const [value, setValue] = useState("nextjs");

  return (
    <WheelPickerWrapper>
      <WheelPicker
        options={options}
        value={value}
        onValueChange={setValue}
      />
    </WheelPickerWrapper>
  );
}
24 lines

Examples

Simple Picker

A single wheel picker for selecting from a list of options.

  • Next.js
  • Vite
  • Remix
  • Astro
  • Nuxt
  • SvelteKit
  • Gatsby
  • Next.js
  • Vite
  • Remix
  • Astro
  • Nuxt
  • SvelteKit
  • Gatsby

Selected: nextjs

Time Picker

Multiple wheels with infinite scrolling for hour/minute selection.

  • 08
  • 09
  • 10
  • 11
  • 12
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 01
  • 02
  • 03
  • 04
  • 05
  • 12
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 01
  • 55
  • 56
  • 57
  • 58
  • 59
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 00
  • 01
  • 02
  • 03
  • 04
  • 59
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 00
  • AM
  • PM
  • AM
  • PM

Selected: 9:30 AM

Date Picker

Three wheels for month, day, and year selection.

  • January
  • February
  • March
  • April
  • May
  • June
  • July
  • August
  • September
  • October
  • November
  • December
  • January
  • February
  • March
  • April
  • May
  • June
  • July
  • August
  • September
  • October
  • November
  • December
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 2000
  • 2001
  • 2002
  • 2003
  • 2004
  • 2005
  • 2006
  • 2007
  • 2008
  • 2009
  • 2010
  • 2011
  • 2012
  • 2013
  • 2014
  • 2015
  • 2016
  • 2017
  • 2018
  • 2019
  • 2020
  • 2021
  • 2022
  • 2023
  • 2024
  • 2025
  • 2026
  • 2027
  • 2028
  • 2029
  • 2000
  • 2001
  • 2002
  • 2003
  • 2004
  • 2005
  • 2006
  • 2007
  • 2008
  • 2009
  • 2010
  • 2011
  • 2012
  • 2013
  • 2014
  • 2015
  • 2016
  • 2017
  • 2018
  • 2019
  • 2020
  • 2021
  • 2022
  • 2023
  • 2024
  • 2025
  • 2026
  • 2027
  • 2028
  • 2029

Features

  • 3D wheel effect with CSS perspective
  • Smooth inertia scrolling with velocity tracking
  • Infinite loop mode for continuous scrolling
  • Keyboard navigation (Arrow keys, Home, End)
  • Type-ahead search for quick selection
  • Touch and mouse drag support
  • Focus management with visual indicators
  • Controlled and uncontrolled modes

API Reference

WheelPickerWrapper

className
string

CSS class name for the wrapper container

children
ReactNode

WheelPicker components

PropTypeDefaultDescription
classNamestring—CSS class name for the wrapper container
childrenReactNode—WheelPicker components

WheelPicker

options
WheelPickerOption[]

Array of selectable options

value
string | number

Controlled value

defaultValue
string | number

Uncontrolled default value

onValueChange
(value) => void

Callback when the selected value changes

infinitefalse
boolean

Enable infinite loop scrolling

visibleCount20
number

Number of visible options in the wheel

optionItemHeight30
number

Height per item in pixels

PropTypeDefaultDescription
optionsWheelPickerOption[]—Array of selectable options
valuestring | number—Controlled value
defaultValuestring | number—Uncontrolled default value
onValueChange(value) => void—Callback when the selected value changes
infinitebooleanfalseEnable infinite loop scrolling
visibleCountnumber20Number of visible options in the wheel
optionItemHeightnumber30Height per item in pixels

Credits

Built on @ncdai/react-wheel-picker by Chanh Dai Nguyen.