Skip to content

Live Weather Card

Display live weather of your city

Live Weather Card preview image 1

Summary

Display live weather of your city

Description

A clean live weather widget powered by real-time weather data and precise latitude/longitude coordinates.

Drop it onto your canvas, enter your coordinates, and the component automatically displays the current temperature, weather condition, and detected location name. The card updates its icon and gradient style for sunny, clear, cloudy, rain, storm, and snow states.

To find coordinates, search your city or landmark in Google Maps, right-click the main city area, and copy the latitude and longitude.

Features:

- Real-time weather data

- No API key required

- Latitude and longitude based accuracy

- Automatic location name detection

- Optional custom location name override

- Celsius and Fahrenheit support

- Weather-based icons and gradients

- Built-in fallback values

- Responsive text truncation for long location names

Perfect for landing pages, dashboards, travel sites, event pages, hotel websites, location-based portfolios, and interactive Framer projects.

Rank history How rankings work →

12001400148938/149/59/2710/1911/10
  • All · #3859

Details

More like this