Appz Thermostat

Live Demos Hub
GitHub ↗

Appz Thermostat

Interactive Shadcn-quality hypermedia component for Hyperstack.

Interactive Preview

HVAC Climate Control
21.5 °C

HTML Source

<!-- Dual-Dial HVAC Thermostat Component -->
<app-thermostat temp="21.5" mode="cool" class="p-6 rounded-3xl bg-slate-900/90 border border-slate-800 flex flex-col items-center gap-4 shadow-xl">
  <span class="text-xs uppercase font-extrabold tracking-widest text-indigo-400">HVAC Climate Control</span>
  <div class="flex items-center gap-6">
    <button class="thermostat-minus w-12 h-12 rounded-full bg-slate-800 hover:bg-slate-700 text-white font-bold text-xl active:scale-90 transition-all">-</button>
    <div class="text-center">
      <span class="thermostat-temp text-4xl font-black text-white">21.5</span>
      <span class="text-sm font-bold text-slate-400 ml-1">°C</span>
    </div>
    <button class="thermostat-plus w-12 h-12 rounded-full bg-slate-800 hover:bg-slate-700 text-white font-bold text-xl active:scale-90 transition-all">+</button>
  </div>
</app-thermostat>