Number Field

Forms

About

A bounded numeric input with increment/decrement buttons, odometer-style rolling digit animation, keyboard stepping, and an optional draggable label to scrub the value.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Number Field to your project and fits it to your theme.

Code

How Number Field is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import NumberField from "@/components/ui/number-field";

export default function NumberFieldDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-[var(--background)] p-8">
      <NumberField
        label="Quantity"
        defaultValue={1}
        min={0}
        max={99}
        description="Up to 99 per order"
      />
    </div>
  );
}