About
A customizable numeric input component with increment/decrement buttons and a visual progress indicator. Features - Input Controls - Increment/decrement buttons - Min/max value constraints - Custom step size - Default value support - Visual Feedback - Progress bar indicator - Focus states - Min/max labels - Dark mode support
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Numeric Input to your project and fits it to your theme.
Code
How Numeric Input is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { NumericInput } from "@/components/ui/numeric-input";
function NumericInputDemo() {
return (
<div className="block min-w-[300px]">
<NumericInput />
</div>
);
}
export { NumericInputDemo };
















