Minus, value and plus Icon Buttons in a 10% ink pill.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/number-stepperPlayground
States
Icons animation
Disabled
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/number-stepper
Accessibility
- A named group.
- The value is a polite live region.
- Minus turns off at
min, plus atmax.
Motion
- Digits roll as the value changes.
- Buttons press to 0.98.
Responsive behavior
- Hug width, touch sizes on Mobile.
Performance
- The value rolls on change, with no loops or timers.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import NumberStepper from @/components/fetaui/number-stepper.
- value and onValueChange control it, or use defaultValue. min and max switch the Buttons off at the ends.
- label names the group. Composes IconButton.
Related
Pricing · TiersProBlockSection Heading with billing Tabs, three Pricing Cards and a seat calculator.InputComponentThe single line text control: a pill on the tray fill that lifts onto the surface when focused.Credit Top-upComponentBalance with runway and a 14 day trend, credit packs, a custom amount, auto top-up and Buy.SliderComponentPick a value or a range by dragging. Line for forms, Bold for a headline value, Field for dense inspectors, all with one or two thumbs.Cart ButtonComponentA mini cart with item rows, a rolling subtotal and a Checkout that stays disabled while empty.