Back to UI Components
Animated

Fractional Picker

A draggable ruler-style control for choosing numeric values, with spring snapping to settle on each notch, suited to settings and filter panels.

Fractional Picker is a real, MIT-licensed React + Tailwind animated component from the open-source Watermelon UI library, in its micro-interaction set. Run the install command above with the shadcn CLI and it drops the component's actual source straight into your project.

It depends on motion/react, tailwindcss, so make sure those are installed too.

The code you install is the component's own source — once it's in your repo, it's yours to restyle.

CategoryAnimated
LibraryWatermelon UI
SubcategoryMicro-Interaction
Dependenciesmotion/react, tailwindcss
npx shadcn@latest add https://registry.watermelon.sh/r/fractional-picker.json

How to use it

  1. Run the install command above — the shadcn CLI drops the real component files into your project.
  2. Install the dependencies listed below it, if any.
  3. Import the component and restyle it with your own Tailwind tokens.
Compiled and written by VintuxAI from public sources.

Related in Animated

Inline Disclosure MenuA menu that expands within the page, offering related actions and confirming deletion through a second step.Aave Swap ComponentAn interactive panel for swapping cryptocurrencies, with animated fields for amounts and live value calculatioActivities CardA card that expands with spring animation, showing an activities list beneath a three-dimensional header, for Adaptive SliderA slider that changes color as it moves and displays the calorie amount for the selected value.Add Cash DisclosureAn expandable panel that lays out the details for adding cash, including limits, fees, and a confirmation stepBudget CardA card that shows how much has been spent, the set limit, and what remains for a budget.Calendar WidgetA calendar widget with animated blur that adds depth and directs focus as you interact with dates.Card CueA small interactive element that responds to user input, placed within cards or panels to add feedback.Card Split AccordianA card that splits open when clicked, expanding in place to show more details within a layout.Card SwipeA stack of cards that responds to swipe gestures, using speed to advance pages and move through the set.
← Back to UI Components