Weather Widget

Dashboards 5

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 { WeatherTile } from "@/components/ui/weather";

const TILES = [
  { sky: "clear", name: "Clear", temp: 21, meta: "Dry" },
  { sky: "partly", name: "Partly", temp: 20, meta: "Rain 10%" },
  { sky: "cloud", name: "Cloudy", temp: 17, meta: "Rain 20%" },
  { sky: "drizzle", name: "Drizzle", temp: 15, meta: "Rain 50%" },
  { sky: "rain", name: "Rain", temp: 14, meta: "Rain 80%" },
  { sky: "storm", name: "Thunder", temp: 16, meta: "Rain 90%" },
  { sky: "snow", name: "Snow", temp: -3, meta: "Snow 60%" },
  { sky: "sleet", name: "Sleet", temp: 1, meta: "Mixed 70%" },
  { sky: "mist", name: "Mist", temp: 9, meta: "Vis 800 m" },
  { sky: "windy", name: "Windy", temp: 15, meta: "42 km/h" },
  { sky: "heat", name: "Heat", temp: 38, meta: "UV 10" },
] as const;

export default function WeatherTileGridDemo() {
  return (
    <div className="flex flex-wrap items-start gap-10 p-10">
      {TILES.map((t) => (
        <WeatherTile
          key={t.sky}
          sky={t.sky}
          hour={12}
          temp={t.temp}
          name={t.name}
          meta={t.meta}
        />
      ))}
    </div>
  );
}