Installation Methods React Wheel Picker can be installed in two ways: via shadcn/ui for a quick setup with pre-styled components, or as a primitives package for complete control over styling.
shadcn/ui Quick setup with shadcn CLI and pre-configured styling
Primitives Unstyled components with full customization control
Install via shadcn/ui The easiest way to get started is using the shadcn CLI. This automatically adds the component to your project with pre-configured styling. npx shadcn add @ncdai/wheel-picker
This command will:
Install the @ncdai/react-wheel-picker package
Add the component files to your components/ directory
Configure default styling that works with your shadcn/ui theme
Enable AI assistants to understand your component registry: Learn more about the shadcn MCP server and how it helps AI assistants work with your components. Example AI Prompts Once configured, you can use prompts like:
“Create a wheel picker demo from the ncdai registry”
“Create a wheel picker form demo from the ncdai registry”
Import and Use After installation, import the components from your local components directory: import { WheelPicker , WheelPickerWrapper , type WheelPickerOption , } from "@/components/wheel-picker" ;
Basic Usage import { useState } from "react" ; import { WheelPicker , WheelPickerWrapper , type WheelPickerOption , } from "@/components/wheel-picker" ; const options : WheelPickerOption [] = [ { label: "Next.js" , value: "nextjs" }, { label: "Vite" , value: "vite" }, { label: "Remix" , value: "remix" }, ]; export function WheelPickerDemo () { const [ value , setValue ] = useState ( "nextjs" ); return ( < WheelPickerWrapper > < WheelPicker options = { options } value = { value } onValueChange = { setValue } /> </ WheelPickerWrapper > ); }
Install as Primitives For complete control over styling, install the primitives package directly: npm install @ncdai/react-wheel-picker
Import Styles
Import the default CSS
Add the core CSS to your app’s entry point (e.g., src/app/layout.tsx, src/main.tsx, or src/index.tsx): import "@ncdai/react-wheel-picker/style.css" ;
The default CSS includes only basic layout styles. Visual styling is controlled via classNames prop or CSS selectors.
Import components
Import the components in your React files: import { WheelPicker , WheelPickerWrapper , type WheelPickerOption , } from "@ncdai/react-wheel-picker" ;
Style with Tailwind CSS import { useState } from "react" ; import { WheelPicker , WheelPickerWrapper , type WheelPickerOption , } from "@ncdai/react-wheel-picker" ; const options : WheelPickerOption [] = [ { label: "Next.js" , value: "nextjs" }, { label: "Vite" , value: "vite" }, { label: "Remix" , value: "remix" }, { label: "Astro" , value: "astro" }, ]; export function WheelPickerDemo () { const [ value , setValue ] = useState ( "nextjs" ); return ( < WheelPickerWrapper className = "w-56 rounded-md border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950" > < WheelPicker options = { options } value = { value } onValueChange = { setValue } classNames = { { optionItem: "text-zinc-400 dark:text-zinc-500 data-disabled:opacity-40" , highlightWrapper: "bg-zinc-100 text-zinc-950 dark:bg-zinc-900 dark:text-zinc-50 data-rwp-focused:ring-2 data-rwp-focused:ring-zinc-300 data-rwp-focused:ring-inset dark:data-rwp-focused:ring-zinc-600" , highlightItem: "data-disabled:opacity-40" , } } /> </ WheelPickerWrapper > ); }
Style with CSS Alternatively, use CSS selectors to style the components: [ data-rwp-wrapper ] { width : 14 rem ; border-radius : 0.375 rem ; border : 1 px solid #e4e4e7 ; background-color : #ffffff ; } [ data-rwp-option ] { color : #a1a1aa ; } [ data-rwp-highlight-wrapper ] { background-color : #f4f4f5 ; color : #09090b ; } [ data-rwp-highlight-wrapper ][ data-rwp-focused ] { box-shadow : inset 0 0 0 2 px #d4d4d8 ; } [ data-rwp-option ][ data-disabled ], [ data-rwp-highlight-item ][ data-disabled ] { opacity : 0.4 ; }
Then use the components without additional classNames: export function WheelPickerDemo () { const [ value , setValue ] = useState ( "nextjs" ); return ( < WheelPickerWrapper > < WheelPicker options = { options } value = { value } onValueChange = { setValue } /> </ WheelPickerWrapper > ); }
Package Details
React Wheel Picker requires React 16.8 or higher: { "react" : "^16.8 || ^17.0 || ^18.0 || ^19.0.0" }
Verify Installation To verify the installation was successful, create a simple test component:
import { useState } from "react" ; import { WheelPicker , WheelPickerWrapper , type WheelPickerOption , } from "@ncdai/react-wheel-picker" ; const testOptions : WheelPickerOption [] = [ { label: "Option 1" , value: "1" }, { label: "Option 2" , value: "2" }, { label: "Option 3" , value: "3" }, ]; export function TestPicker () { const [ value , setValue ] = useState ( "1" ); return ( < div > < h2 > Selected: { value } </ h2 > < WheelPickerWrapper > < WheelPicker options = { testOptions } value = { value } onValueChange = { setValue } /> </ WheelPickerWrapper > </ div > ); }
If the component renders without errors, the installation is successful!
Next Steps
Quick Start Guide Learn how to build your first wheel picker
API Reference Explore all available props and options
Examples See real-world examples and use cases
TypeScript Support Learn about type definitions and generics