## Thermostat (S—270)

A smart-home thermostat: drag the dial or tap plus and minus, switch heat, cool or off, and see when it reaches target.

- URL: https://sundaeui.dev/components/thermostat
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/thermostat.json`
- Tags: climate, smart-home, dial, temperature, iot, thermostat

The dial is a 270-degree arc of ticks; the set point is a solid knob and the room temperature a small notch. Drag around the arc or use arrow keys.
Modes are a segmented control. An estimate line says how long until the room reaches target, or that it is holding.

### Usage

```tsx
import { Thermostat } from '@/components/sundae/thermostat'

<Thermostat />
```

### Props

- `target` (`number`, default `21`): Set point.
- `current` (`number`, default `19`): Room temperature.
- `unit` (`'C' | 'F'`, default `'C'`): Scale.
- `onChange` (`(t: number) => void`): Called when the set point changes.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Smart-home dashboards, device detail screens.

### When not to use

- Multi-zone schedules: use a schedule editor.

### Accessibility

- The dial is a slider with aria-valuetext including mode and unit.
- Mode buttons are a radiogroup.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← → / ↑ ↓: Change the set point by 0.5°