Number wheel

Component 4

About

Mechanical rolling digits. Each digit is a printed drum that turns to its figure, lowest digit first. Skeuomorphic, accessible, Base UI. Part of Bevel: bevel-ui.vercel.app

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

Code

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

Usage.tsx

"use client"

import * as React from "react"
import { NumberWheel } from "@/components/ui/number-wheel"

export function NumberWheelCounter() {
  const [value, setValue] = React.useState(1240)
  const buttons = [
    { label: "+1", change: 1 },
    { label: "+99", change: 99 },
    { label: "−250", change: -250 },
  ]
  return (
    <div className="flex flex-col items-center gap-6">
      <NumberWheel value={value} live="polite" className="text-5xl" />
      <NumberWheel value={value / 100} currency="USD" tone="black" className="text-2xl" />
      <div className="flex gap-2">
        {buttons.map((button) => (
          <button
            key={button.label}
            type="button"
            onClick={() => setValue((v) => Math.max(0, v + button.change))}
            className="h-9 rounded-md border px-3 text-sm font-medium hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
          >
            {button.label}
          </button>
        ))}
      </div>
    </div>
  )
}

export default NumberWheelCounter