Scrub Inputs, animated React component

Design-tool number fields: drag a label sideways to change the value, with Shift for big steps and Alt for fine ones. A badge shows how far you have moved, then reports the change when you let go.

Pro
Inputs & Controls
Spring

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Radius

Rotate

Scale

Drag a label sideways. Shift for big steps.

Props

Prop	Type	Default	What it does
label	string	—	ScrubInput: field name; dragging it changes the value.
value	number	—	ScrubInput: the current value (controlled).
onChange	(v: number) => void	—	ScrubInput: called with each new value while dragging, typing or using the arrow keys.
min	number	—	ScrubInput: lowest allowed value.
max	number	—	ScrubInput: highest allowed value.
step	number	1	ScrubInput: change per two pixels of drag and per arrow key press.
unit	string	""	ScrubInput: suffix shown after the number and in the change badge.
accent	string	"#0071e3"	Both: badge colour while dragging; ScrubInputs also starts its sample shape's gradient with it.
autoplay	boolean	false	ScrubInputs: changes the three sample fields by itself until someone touches them.

Add it to your project

Prepare your project

You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

npx shadcn@latest init

Then add the Nexus registry to your components.json (the registries key is the part that matters):

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}

2
Add the component
Run this from your project root. It adds the component, the utilities it uses and its packages.
```
npx shadcn@latest add @nexus-labs/scrub-inputs
```
3
Check what was added
With the standard aliases, these files land in your project:
components/
scrub-inputs/
index.ts
scrub-inputs.tsx
4
Copying by hand? Install the packages
Skip this if you used the command above.
```
npm install framer-motion
```

Use it in a page

Import it and render it. The Code tab above has the full example.

// app/page.tsx
import { ScrubInputs } from "@/components/scrub-inputs";

export default function Page() {
  return (
    <main>
      <ScrubInputs />
    </main>
  );
}

ScrubScrub Inputs, animated React component

Play with it

Props

More inputs & controls

Scrub Inputs, animated React component