Spinning Number

Component

About

Number spinner with motion animation

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

Code

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

Usage.tsx

"use client";

import SpinningNumber from "@/components/ui/spinning-number";
import { useState } from "react";

export default function SpinningNumberDemo() {
  const [price, setPrice] = useState("207");

  return (
    <div className="flex flex-col items-center justify-center gap-6 p-10">
      <span className="text-5xl font-semibold tabular-nums">
        $<SpinningNumber value={price} />
      </span>
      <button
        type="button"
        onClick={() => setPrice(String(Math.floor(Math.random() * 900) + 100))}
        className="rounded-md border px-4 py-2 text-sm font-medium hover:bg-accent"
      >
        Randomize price
      </button>
    </div>
  );
}