Ruler Picker

A draggable tape-measure style number picker (e.g. for weight) that coasts and settles on tenths, with keyboard, wheel and touch support and a kg/lb unit switch.

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

"use client";

import { RulerPicker } from "@/components/ui/ruler-picker";

export default function RulerPickerNightDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center px-4 py-12 bg-[#09090b] text-[#f0ece4]">
      <RulerPicker theme="night" />
    </div>
  );
}