Components
Loading preview...
Blender and Unity style input fields that allow infinite value scrubbing by clicking and dragging.
npx shadcn@latest add https://21st.dev/r/mathewsaju210/scrubbable-inputsimport { TimeScrubber, NumberScrubber } from "@/components/ui/scrubbable-inputs";
import { cn } from "@/lib/utils";
export default function ScrubbablesDemo() {
return (
<div className={cn("flex flex-col md:flex-row min-h-screen w-full overflow-hidden font-sans")}>
{/* Light Theme Side */}
<div className="w-full md:w-1/2 min-h-full bg-zinc-50 flex flex-col items-center justify-center p-8 border-b md:border-b-0 md:border-r border-zinc-200">
<div className="mb-12 text-center max-w-md">
<h1 className="text-3xl font-bold text-zinc-900 mb-2">Light Mode</h1>
<p className="text-sm text-zinc-500">
Click arrows to step, or drag to scrub. <br />
<span className="text-zinc-400">Hold <b>Shift</b> for faster scrubbing.</span>
</p>
</div>
<div className="flex flex-col gap-10">
<div>
<div className="text-sm font-semibold text-zinc-400 uppercase tracking-wider mb-2 text-center">Time Input</div>
<TimeScrubber theme="light" />
</div>
<div>
<div className="text-sm font-semibold text-zinc-400 uppercase tracking-wider mb-2 text-center">Number Input</div>
<NumberScrubber theme="light" />
</div>
</div>
</div>
{/* Dark Theme Side */}
<div className="w-full md:w-1/2 min-h-full bg-zinc-950 flex flex-col items-center justify-center p-8">
<div className="mb-12 text-center max-w-md">
<h1 className="text-3xl font-bold text-white mb-2">Dark Mode</h1>
<p className="text-sm text-zinc-500">
Click arrows to step, or drag to scrub. <br />
<span className="text-zinc-400">Hold <b>Shift</b> for faster scrubbing.</span>
</p>
</div>
<div className="flex flex-col gap-10">
<div>
<div className="text-sm font-semibold text-zinc-600 uppercase tracking-wider mb-2 text-center">Time Input</div>
<TimeScrubber theme="dark" />
</div>
<div>
<div className="text-sm font-semibold text-zinc-600 uppercase tracking-wider mb-2 text-center">Number Input</div>
<NumberScrubber theme="dark" />
</div>
</div>
</div>
</div>
);
}