weather compact sidebar pill weather compact mini pill inline sidebar show weather in small space inline weather indicator
Weather Widget Compact
Fetch pattern JSON:
curl https://webspire.de/patterns/weather-widget/compact.json compact.html
<div
class="ws-weather-widget inline-flex items-center gap-3 rounded-full border px-4 py-2"
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);
"
>
<span class="text-lg" role="img" aria-label="Partly cloudy">⛅</span>
<span class="text-base font-semibold" style="color: var(--ws-weather-widget-text)">18°</span>
<span
class="h-4 w-px"
style="background: var(--ws-weather-widget-border)"
></span>
<span class="text-sm font-medium" style="color: var(--ws-weather-widget-text-soft)">San Francisco</span>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
weathercompactsidebarpill
A space-efficient weather widget rendered as a pill or inline element. Shows temperature and a condition icon without the full card layout, perfect for embedding in navbars and tight sidebar slots.