Thermo Dial, animated React component

A thermostat ring you drag round or step with the arrow keys. Ticks light up to the set point, the glow shifts from cool blue to warm orange, the number rolls and the label says whether it is heating or cooling toward the room temperature.

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.

Heating21.0°Room 19.5°

Drag round the ring.

Props

Prop	Type	Default	What it does
room	number	19.5	Current room temperature; marks a tick and decides Heating, Cooling or Holding.
defaultValue	number	21	Target temperature the dial starts at.
min	number	10	Lowest settable temperature (start of the arc).
max	number	30	Highest settable temperature (end of the arc).
step	number	0.5	Increment for dragging and the arrow keys.
onChange	(value: number) => void	—	Called with the new target when the user drags or uses the keyboard.
autoplay	boolean	false	Turns the dial to a few set points until someone touches it.

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/thermo-dial
```
3
Check what was added
With the standard aliases, these files land in your project:
components/
thermo-dial/
index.ts
thermo-dial.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 { ThermoDial } from "@/components/thermo-dial";

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

Thermo Dial, animated React component

Play with it

Props

More inputs & controls