Weather Widget

Cards 74

About

A weather card that draws the sky as an animated dot-matrix scene following the time of day (sun arc, moon phase, clouds, rain, snow, wind), with the current temperature, an hourly forecast strip and a 7-day low/high range chart, plus a compact single-condition tile variant.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Weather Widget to your project and fits it to your theme.

Code

How Weather Widget is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Weather from "@/components/ui/weather";

export default function WeatherDemo() {
  return (
    <div className="flex items-center justify-center p-10">
      <Weather
        place="Lisbon"
        summary="Sunny now"
        hour={9}
        sky="clear"
        condition="Sunny"
        temp={19}
        feels={18}
        rain={0}
        wind="9 km/h"
        live
        clock="09:00"
        hours={[
          { label: "Now", hour: 9, kind: "clear", temp: 19 },
          { label: "12", hour: 12, kind: "partly", temp: 24 },
          { label: "15", hour: 15, kind: "rain", temp: 22 },
          { label: "18", hour: 18, kind: "cloud", temp: 20 },
          { label: "21", hour: 21, kind: "clear", temp: 17 },
          { label: "00", hour: 0, kind: "clear", temp: 15 },
        ]}
        days={[
          { name: "Today", kind: "rain", low: 14, high: 24 },
          { name: "Sun", kind: "partly", low: 15, high: 23 },
          { name: "Mon", kind: "clear", low: 16, high: 26 },
          { name: "Tue", kind: "clear", low: 17, high: 28 },
          { name: "Wed", kind: "cloud", low: 16, high: 25 },
          { name: "Thu", kind: "rain", low: 14, high: 20 },
          { name: "Fri", kind: "partly", low: 13, high: 21 },
        ]}
      />
    </div>
  );
}