weather widget dashboard forecast weather forecast temperature climate conditions show current weather display temperature and conditions
Weather Widget
Fetch pattern JSON:
curl https://webspire.de/patterns/weather-widget/base.json base.html
<section
class="ws-weather-widget max-w-sm rounded-2xl border p-6"
style="
--ws-weather-widget-bg: oklch(0.98 0.005 75);
--ws-weather-widget-text: oklch(0.25 0.02 75);
--ws-weather-widget-text-soft: oklch(0.45 0.015 75);
--ws-weather-widget-text-muted: oklch(0.6 0.01 75);
--ws-weather-widget-border: oklch(0.9 0.01 75);
--ws-weather-widget-accent: oklch(0.55 0.12 250);
--ws-weather-widget-accent-soft: oklch(0.92 0.04 250);
background: var(--ws-weather-widget-bg);
color: var(--ws-weather-widget-text);
border-color: var(--ws-weather-widget-border);
"
>
<!-- Header: City + Condition -->
<div class="flex items-start justify-between">
<div>
<h3 class="text-lg font-semibold" style="color: var(--ws-weather-widget-text)">San Francisco</h3>
<p class="text-sm" style="color: var(--ws-weather-widget-text-muted)">Partly Cloudy</p>
</div>
<span class="text-4xl" role="img" aria-label="Partly cloudy">⛅</span>
</div>
<!-- Current Temperature -->
<div class="mt-4 flex items-baseline gap-2">
<span class="text-5xl font-light tracking-tight" style="color: var(--ws-weather-widget-text)">18°</span>
<div class="flex gap-2 text-sm font-medium">
<span style="color: var(--ws-weather-widget-text-soft)">H: 22°</span>
<span style="color: var(--ws-weather-widget-text-muted)">L: 12°</span>
</div>
</div>
<!-- Stats Row -->
<div
class="mt-5 flex gap-4 rounded-xl px-4 py-3"
style="background: var(--ws-weather-widget-accent-soft)"
>
<div class="flex-1 text-center">
<p class="text-xs font-medium uppercase tracking-wide" style="color: var(--ws-weather-widget-text-muted)">Humidity</p>
<p class="mt-0.5 text-sm font-semibold" style="color: var(--ws-weather-widget-text)">72%</p>
</div>
<div
class="w-px self-stretch"
style="background: var(--ws-weather-widget-border)"
></div>
<div class="flex-1 text-center">
<p class="text-xs font-medium uppercase tracking-wide" style="color: var(--ws-weather-widget-text-muted)">Wind</p>
<p class="mt-0.5 text-sm font-semibold" style="color: var(--ws-weather-widget-text)">14 km/h</p>
</div>
<div
class="w-px self-stretch"
style="background: var(--ws-weather-widget-border)"
></div>
<div class="flex-1 text-center">
<p class="text-xs font-medium uppercase tracking-wide" style="color: var(--ws-weather-widget-text-muted)">UV</p>
<p class="mt-0.5 text-sm font-semibold" style="color: var(--ws-weather-widget-text)">5</p>
</div>
</div>
<!-- 5-Day Forecast -->
<div
class="mt-5 border-t pt-4"
style="border-color: var(--ws-weather-widget-border)"
>
<div class="grid grid-cols-5 gap-2 text-center">
<div>
<p class="text-xs font-medium" style="color: var(--ws-weather-widget-text-muted)">Mon</p>
<span class="my-1 block text-lg" role="img" aria-label="Sunny">☀️</span>
<p class="text-xs font-semibold" style="color: var(--ws-weather-widget-text)">24°</p>
</div>
<div>
<p class="text-xs font-medium" style="color: var(--ws-weather-widget-text-muted)">Tue</p>
<span class="my-1 block text-lg" role="img" aria-label="Partly cloudy">⛅</span>
<p class="text-xs font-semibold" style="color: var(--ws-weather-widget-text)">20°</p>
</div>
<div>
<p class="text-xs font-medium" style="color: var(--ws-weather-widget-text-muted)">Wed</p>
<span class="my-1 block text-lg" role="img" aria-label="Rainy">🌧️</span>
<p class="text-xs font-semibold" style="color: var(--ws-weather-widget-text)">16°</p>
</div>
<div>
<p class="text-xs font-medium" style="color: var(--ws-weather-widget-text-muted)">Thu</p>
<span class="my-1 block text-lg" role="img" aria-label="Cloudy">☁️</span>
<p class="text-xs font-semibold" style="color: var(--ws-weather-widget-text)">18°</p>
</div>
<div>
<p class="text-xs font-medium" style="color: var(--ws-weather-widget-text-muted)">Fri</p>
<span class="my-1 block text-lg" role="img" aria-label="Sunny">☀️</span>
<p class="text-xs font-semibold" style="color: var(--ws-weather-widget-text)">22°</p>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
weatherwidgetdashboardforecast
A clean weather widget showing current temperature, weather condition icon, and location name. Designed for dashboards, sidebars, and informational panels where users need a quick weather overview.