React Stepper Button Group
A stepper control with increment/decrement buttons flanking numeric input for precise value adjustment
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Numbers need both precision and speed—steppers provide both. This React component combines shadcn/ui's Button, ButtonGroup, and Input components with Lucide React's ChevronUpIcon and ChevronDownIcon for intuitive numeric input controls. Built on Radix UI with outline variant buttons using Math.max for minimum value enforcement and centered text-center Input styling with w-20 compact widths, the pattern delivers clickable increment/decrement alongside direct numeric entry. Perfect for e-commerce quantity selectors where users adjust item counts, pricing configurators with granular value control, settings panels requiring bounded numeric inputs, or any interface needing both button-based stepping and keyboard entry—button groups unify controls, chevron buttons provide tactile adjustment, central input enables precision.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-advanced-3.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-advanced-3.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-advanced-3.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-advanced-3.jsonRelated patterns you will also like
Button Group with Select
Compound input controls
Input Component
Text input fields
Outline Button
Border-style button variant
Basic Button Group
Simple grouped buttons
Slider Component
Range input controls
Form Component
Form layout patterns