Weather Widgets

What is a weather widget?

A weather widget is a card or panel that shows current conditions and often a short forecast: temperature, an icon for sun, cloud or rain, wind, humidity and a list of upcoming hours or days. Weather cards are used on dashboards, travel and event sites, smart home interfaces and personal start pages, and they make popular UI design exercises.

When to use a weather card

Use a weather widget when the forecast genuinely helps the user, for example on a booking page for outdoor activities or in an admin dashboard. The templates here are front-end layouts with sample data; you feed them with data from your own weather API.

Best practices for a responsive weather widget:

• Put the most important value, the current temperature, in the largest type and keep secondary details smaller.
• Always pair weather icons with text, such as "Light rain", and give decorative icons aria-hidden="true".
• Show units clearly and consider a Celsius and Fahrenheit switch built as a labelled button group.
• Format times and dates with Intl.DateTimeFormat for the user's locale.
• Make hourly forecasts horizontally scrollable on small screens with visible overflow cues, and ensure they can be scrolled with the keyboard.
• Use animated backgrounds sparingly and respect prefers-reduced-motion.
• Cache API responses and show a loading and error state instead of an empty card.

Bootstrap, Tailwind CSS and pure CSS weather widgets

Each weather widget has a live preview and code tabs for HTML, CSS and JS. Bootstrap 6 versions use the new alpha ES module build and theme-* colour roles so the card adapts to light and dark themes. Bootstrap 5 versions use cards and grid utilities, Tailwind CSS versions use utility classes and gradients, and pure CSS versions rely on plain CSS. Filter by framework, copy or download the code, and replace the sample values with live data.