Weather
React Bootstrap 5 Weather templates & widgets
Responsive React Weather templates built with the latest Bootstrap 5. Examples of weather dashboards with icons, cards, real data from API, interactive animated backgrounds & moreBasic weather widget
Simple weather card with temperature, wind & humidity metrics.
Warsaw
15:07
13°C
Stormy 40 km/h
84%
0.2h
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCol,
MDBContainer,
MDBIcon,
MDBRow,
MDBTypography,
} from "mdb-react-ui-kit";
export default function Basic() {
return (
<section className="vh-100" style={{ backgroundColor: "#4B515D" }}>
<MDBContainer className="h-100">
<MDBRow className="justify-content-center align-items-center h-100">
<MDBCol md="8" lg="6" xl="4">
<MDBCard style={{ color: "#4B515D", borderRadius: "35px" }}>
<MDBCardBody className="p-4">
<div className="d-flex">
<MDBTypography tag="h6" className="flex-grow-1">
Warsaw
</MDBTypography>
<MDBTypography tag="h6">15:07</MDBTypography>
</div>
<div className="d-flex flex-column text-center mt-5 mb-4">
<MDBTypography
tag="h6"
className="display-4 mb-0 font-weight-bold"
style={{ color: "#1C2331" }}
>
{" "}
13°C{" "}
</MDBTypography>
<span className="small" style={{ color: "#868B94" }}>
Stormy
</span>
</div>
<div className="d-flex align-items-center">
<div className="flex-grow-1" style={{fontSize: '1rem'}}>
<div>
<MDBIcon
fas
icon="wind fa-fw"
style={{ color: "#868B94" }}
/>{" "}
<span className="ms-1"> 40 km/h</span>
</div>
<div>
<MDBIcon
fas
icon="tint fa-fw"
style={{ color: "#868B94" }}
/>{" "}
<span className="ms-1"> 84% </span>
</div>
<div>
<MDBIcon
fas
icon="sun fa-fw"
style={{ color: "#868B94" }}
/>{" "}
<span className="ms-1"> 0.2h </span>
</div>
</div>
<div>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-weather/ilu1.webp"
width="100px"
/>
</div>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</section>
);
}
Weather App
A simple application design for checking the weather in a given city.
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCol,
MDBContainer,
MDBIcon,
MDBInputGroup,
MDBRadio,
MDBRow,
MDBTypography,
} from "mdb-react-ui-kit";
export default function WeatherApp() {
return (
<section className="vh-100">
<MDBContainer className="h-100 py-5">
<MDBRow className="justify-content-center align-items-center h-100">
<MDBCol md="8" lg="6" xl="4">
<MDBTypography tag="h3" className="mb-4 pb-2 fw-normal">
Check the weather forecast
</MDBTypography>
<MDBInputGroup className="mb-3">
<input
className="form-control rounded"
type="text"
placeholder="City"
/>
<a href="#!" type="button">
<span
className="input-group-text border-0 fw-bold"
id="search-addon"
>
Check!
</span>
</a>
</MDBInputGroup>
<div className="mb-4 p-2">
<MDBRadio
inline
name="flexRadioDefault"
id="flexRadioDefault1"
label="Celcius"
defaultChecked
/>
<MDBRadio
inline
name="flexRadioDefault"
id="flexRadioDefault2"
label="Farenheit"
/>
</div>
<MDBCard className="shadow-0 border">
<MDBCardBody className="p-4">
<MDBTypography tag="h4" className="mb-1 sfw-normal">New York, US</MDBTypography>
<p className="mb-2">
Current temperature: <strong>5.42°C</strong>
</p>
<p>
Feels like: <strong>4.37°C</strong>
</p>
<p>
Max: <strong>6.11°C</strong>, Min: <strong>3.89°C</strong>
</p>
<div className="d-flex flex-row align-items-center">
<p className="mb-0 me-4">Scattered Clouds</p>
<MDBIcon fas icon="cloud" size="3x" style={{color: '#eee'}} />
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</section>
);
}
Weather dashboard with API
A simple dashboard displaying current & future weather with data from free API setup using JavaScript.
Pressure:
|
Humidity:
Now
![]()
Today
Tomorrow
28
Day after tomorrow
28
import React, { useEffect, useMemo, useState } from "react";
import {
MDBCard,
MDBCardBody,
MDBCardHeader,
MDBCol,
MDBContainer,
MDBRow,
} from "mdb-react-ui-kit";
const QUERY_URL = "https://api.openweathermap.org/data/2.5/onecall?";
const LAT = "lat=52.229676&";
const LON = "lon=21.012229&";
const API_OPTIONS = "units=metric&exclude=minutely,alerts&";
const API_KEY = "appid=dbb76c5d98d5dbafcb94441c6a10236e";
const FILE = QUERY_URL + LAT + LON + API_OPTIONS + API_KEY;
const NAME = "Warsaw";
const TIME_NOW = new Date().getHours();
// Icons
let iconBaseUrl = "http://openweathermap.org/img/wn/";
let iconFormat = ".png";
export default function ApiExample() {
const [data, setData] = useState(undefined);
const [description, setDescription] = useState(undefined);
const [temp, setTemp] = useState(undefined);
const [pressure, setPressure] = useState(undefined);
const [humidity, setHumidity] = useState(undefined);
const [bgGif, setBGGif] = useState(undefined);
const iconsFullyUrl = useMemo(
() => ({
today: iconBaseUrl + data?.current.weather[0].icon + iconFormat,
tomorrow: iconBaseUrl + data?.daily[0].weather[0].icon + iconFormat,
dAT: iconBaseUrl + data?.daily[1].weather[0].icon + iconFormat,
now: iconBaseUrl + data.daily[1].weather[0].icon + iconFormat,
plus1: iconBaseUrl + data.hourly[1].weather[0].icon + iconFormat,
plus2: iconBaseUrl + data.hourly[2].weather[0].icon + iconFormat,
plus3: iconBaseUrl + data.hourly[3].weather[0].icon + iconFormat,
plus4: iconBaseUrl + data.hourly[4].weather[0].icon + iconFormat,
plus5: iconBaseUrl + data.hourly[5].weather[0].icon + iconFormat,
}),
[data]
);
useEffect(() => {
fetch(FILE)
.then((res) => res.json())
.then((data) => {
setData(data);
setDescription(data.current.weather[0].description);
setTemp(Math.round(data.current.temp));
setPressure(data.current.pressure);
setHumidity(data.current.humidity);
const main = data.current.weather[0].main;
switch (main) {
case "Snow":
setBGGif(
"url('https://mdbgo.io/ascensus/mdb-advanced/img/snow.gif')"
);
break;
case "Clouds":
setBGGif(
"url('https://mdbgo.io/ascensus/mdb-advanced/img/clouds.gif')"
);
break;
case "Fog":
setBGGif(
"url('https://mdbgo.io/ascensus/mdb-advanced/img/fog.gif')"
);
break;
case "Rain":
setBGGif(
"url('https://mdbgo.io/ascensus/mdb-advanced/img/rain.gif')"
);
break;
case "Clear":
setBGGif(
"url('https://mdbgo.io/ascensus/mdb-advanced/img/clear.gif')"
);
break;
case "Thunderstorm":
setBGGif(
"url('https://mdbgo.io/ascensus/mdb-advanced/img/thunderstorm.gif')"
);
break;
default:
setBGGif(
"url('https://mdbgo.io/ascensus/mdb-advanced/img/clear.gif')"
);
break;
}
});
}, []);
return (
<section className="vh-100">
<MDBContainer className="h-100">
<MDBRow className="justify-content-center align-items-center h-100">
<MDBCol md="9" lg="7" xl="5">
<MDBCard
className="text-white bg-image shadow-4-strong"
style={{
backgroundImage: bgGif ?? "url(https://mdbgo.io/ascensus/mdb-advanced/img/clouds.gif)"
}}
>
<MDBCardHeader className="p-4 border-0">
<div className="text-center mb-3">
<p className="h2 mb-1">{NAME}</p>
<p className="mb-1">{description}</p>
<p className="display-1 mb-1">{temp}°C</p>
<span className="">Pressure: {pressure}</span>
<span className="mx-2">|</span>
<span className="">Humidity: {humidity}%</span>
</div>
</MDBCardHeader>
<MDBCardBody className="p-4 border-top border-bottom mb-2">
<MDBRow className="text-center">
<MDBCol size="2">
<strong className="d-block mb-2">Now</strong>
<img src={iconsFullyUrl.now} className="" alt="" />
<strong className="d-block">{data?.hourly[0].temp}°</strong>
</MDBCol>
<MDBCol size="2">
<strong className="d-block mb-2">{TIME_NOW + 1}</strong>
<img src={iconsFullyUrl.plus1} className="" alt="" />
<strong className="d-block">{data?.hourly[1].temp}°</strong>
</MDBCol>
<MDBCol size="2">
<strong className="d-block mb-2">{TIME_NOW + 2}</strong>
<img src={iconsFullyUrl.plus2} className="" alt="" />
<strong className="d-block">{data?.hourly[2].temp}°</strong>
</MDBCol>
<MDBCol size="2">
<strong className="d-block mb-2">{TIME_NOW + 3}</strong>
<img src={iconsFullyUrl.plus3} className="" alt="" />
<strong className="d-block">{data?.hourly[3].temp}°</strong>
</MDBCol>
<MDBCol size="2">
<strong className="d-block mb-2">{TIME_NOW + 4}</strong>
<img src={iconsFullyUrl.plus4} className="" alt="" />
<strong className="d-block">{data?.hourly[4].temp}°</strong>
</MDBCol>
<MDBCol size="2">
<strong className="d-block mb-2">{TIME_NOW + 5}</strong>
<img src={iconsFullyUrl.plus5} className="" alt="" />
<strong className="d-block">{data?.hourly[5].temp}°</strong>
</MDBCol>
</MDBRow>
</MDBCardBody>
<MDBCardBody className="px-5">
<MDBRow className="align-items-center">
<MDBCol lg="6">
<strong>Today</strong>
</MDBCol>
<MDBCol lg="2" className="text-center">
<img className="w-100" src={iconsFullyUrl.today} alt="" />
</MDBCol>
<MDBCol lg="4" className="text-end">
{temp}°
</MDBCol>
</MDBRow>
<MDBRow className="align-items-center">
<MDBCol lg="6">
<strong>Tomorrow</strong>
</MDBCol>
<MDBCol lg="2" className="text-center">
<img
className="w-100"
src={iconsFullyUrl.tomorrow}
alt=""
/>
</MDBCol>
<MDBCol lg="4" className="text-end">
{Math.round(data?.daily[0].temp.day) ?? undefined}°
</MDBCol>
</MDBRow>
<MDBRow className="align-items-center">
<MDBCol lg="6">
<strong>Day after tommorow</strong>
</MDBCol>
<MDBCol lg="2" className="text-center">
<img className="w-100" src={iconsFullyUrl.dAT} alt="" />
</MDBCol>
<MDBCol lg="4" className="text-end">
{Math.round(data?.daily[1].temp.day) ?? undefined}°
</MDBCol>
</MDBRow>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</section>
);
}
Weather card
Minimalistic weather cards with background image reflecting temperature and clouds & sun icons.
23°C
Coimbra, Portugal
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCol,
MDBContainer,
MDBIcon,
MDBRow,
MDBTypography,
} from "mdb-react-ui-kit";
export default function Card() {
return (
<section className="vh-100" style={{ backgroundColor: "#C1CFEA" }}>
<MDBContainer className="h-100">
<MDBRow
className="justify-content-center align-items-center h-100"
style={{ color: "#282828" }}
>
<MDBCol md="9" lg="7" xl="5">
<MDBCard
className="mb-4 gradient-custom"
style={{ borderRadius: "25px" }}
>
<MDBCardBody className="p-4">
<div className="d-flex justify-content-between pb-2">
<div>
<h2 className="display-2">
<strong>23°C</strong>
</h2>
<p className="text-muted mb-0">Coimbra, Portugal</p>
</div>
<div>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-weather/ilu3.webp"
width="150px"
/>
</div>
</div>
</MDBCardBody>
</MDBCard>
<MDBCard className="mb-4" style={{ borderRadius: "25px" }}>
<MDBCardBody className="p-4">
<div className="d-flex justify-content-around text-center pb-3 pt-2">
<div className="flex-column">
<p className="small">
<strong>21°C</strong>
</p>
<MDBIcon
fas
icon="sun"
size="2x"
className="mb-3"
style={{ color: "#ddd" }}
/>
<p className="mb-0">
<strong>12:00</strong>
</p>
<p
className="mb-0 text-muted"
style={{ fontSize: ".65rem" }}
>
PM
</p>
</div>
<div className="flex-column">
<p className="small">
<strong>2°C</strong>
</p>
<MDBIcon
fas
icon="sun"
size="2x"
className="mb-3"
style={{ color: "#ddd" }}
/>
<p className="mb-0">
<strong>1:00</strong>
</p>
<p
className="mb-0 text-muted"
style={{ fontSize: ".65rem" }}
>
PM
</p>
</div>
<div className="flex-column">
<p className="small">
<strong>20°C</strong>
</p>
<MDBIcon
fas
icon="cloud"
size="2x"
className="mb-3"
style={{ color: "#ddd" }}
/>
<p className="mb-0">
<strong>2:00</strong>
</p>
<p
className="mb-0 text-muted"
style={{ fontSize: ".65rem" }}
>
PM
</p>
</div>
<div className="flex-column">
<p className="small">
<strong>19°C</strong>
</p>
<MDBIcon
fas
icon="cloud"
size="2x"
className="mb-3"
style={{ color: "#ddd" }}
/>
<p className="mb-0">
<strong>3:00</strong>
</p>
<p
className="mb-0 text-muted"
style={{ fontSize: ".65rem" }}
>
PM
</p>
</div>
<div className="flex-column">
<p className="small">
<strong>18°C</strong>
</p>
<MDBIcon
fas
icon="cloud-showers-heavy"
size="2x"
className="mb-3"
style={{ color: "#ddd" }}
/>
<p className="mb-0">
<strong>4:00</strong>
</p>
<p
className="mb-0 text-muted"
style={{ fontSize: ".65rem" }}
>
PM
</p>
</div>
</div>
</MDBCardBody>
</MDBCard>
<MDBCard className="mb-4" style={{ borderRadius: "25px" }}>
<MDBCardBody className="p-4">
<div className="d-flex justify-content-around text-center pb-3 pt-2">
<div className="flex-column">
<p className="small">
<strong>21°C</strong>
</p>
<MDBIcon
fas
icon="sun"
size="2x"
className="mb-3"
style={{ color: "#ddd" }}
/>
<p className="mb-0">
<strong>Mon</strong>
</p>
</div>
<div className="flex-column">
<p className="small">
<strong>20°C</strong>
</p>
<MDBIcon
fas
icon="sun"
size="2x"
className="mb-3"
style={{ color: "#ddd" }}
/>
<p className="mb-0">
<strong>Tue</strong>
</p>
</div>
<div className="flex-column">
<p className="small">
<strong>16°C</strong>
</p>
<MDBIcon
fas
icon="cloud"
size="2x"
className="mb-3"
style={{ color: "#ddd" }}
/>
<p className="mb-0">
<strong>Wed</strong>
</p>
</div>
<div className="flex-column">
<p className="small">
<strong>17°C</strong>
</p>
<MDBIcon
fas
icon="cloud"
size="2x"
className="mb-3"
style={{ color: "#ddd" }}
/>
<p className="mb-0">
<strong>Thu</strong>
</p>
</div>
<div className="flex-column">
<p className="small">
<strong>18°C</strong>
</p>
<MDBIcon
fas
icon="cloud-showers-heavy"
size="2x"
className="mb-3"
style={{ color: "#ddd" }}
/>
<p className="mb-0">
<strong>Fri</strong>
</p>
</div>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</section>
);
}
.gradient-custom {
/* fallback for old browsers */
background: #ffffff;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 236, 210, 1));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 236, 210, 1))
}
.carousel-indicators li {
background-color: #282828;
width: 7px;
height: 7px;
border-radius: 50%;
}
Current Weather info card
An illustrated card with current weather information.
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCardImage,
MDBCol,
MDBContainer,
MDBIcon,
MDBRow,
MDBTypography,
} from "mdb-react-ui-kit";
export default function CurrentInfo() {
return (
<section className="vh-100" style={{ backgroundColor: "#f5f6f7" }}>
<MDBContainer className="h-100">
<MDBRow className="justify-content-center align-items-center h-100">
<MDBCol md="10" lg="8" xl="6">
<MDBCard
className="bg-dark text-white"
style={{ borderRadius: "40px" }}
>
<div className="bg-image" style={{ borderRadius: "35px" }}>
<MDBCardImage
src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-weather/draw1.webp"
className="card-img"
alt="weather"
/>
<div
className="mask"
style={{ backgroundColor: "rgba(190, 216, 232, .5)" }}
></div>
</div>
<div className="card-img-overlay text-dark p-5">
<MDBTypography tag="h4" className="mb-0">Juneau, Alaska, US</MDBTypography>
<p className="display-2 my-3">1.28°C</p>
<p className="mb-2">
Feels Like: <strong>-1.08 °C</strong>
</p>
<MDBTypography tag="h5">Snowy</MDBTypography>
</div>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</section>
);
}
Weather report
A minimalistic weather report dashboard with white background and black borders and a simple table for weather data.
Toronto
21.02.2021
Rain map
-4°C
10:00
Sunday
Cloudy
Sun
-4°C
Mon
-4°C
Tue
-4°C
Wed
-4°C
Thu
-4°C
Fri
-4°C
Sat
-4°C
For a month
11:00 -4°
12:00 -4°
13:00 -5°
14:00 -7°
15:00 -6°
16:00 -4°
17:00 -3°
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCol,
MDBContainer,
MDBRow
} from "mdb-react-ui-kit";
export default function Report() {
return (
<section className="vh-100" style={{ backgroundColor: "#cdc4f9" }}>
<MDBContainer className="h-100">
<MDBRow className="justify-content-center align-items-center h-100">
<MDBCol md="12" xl="10">
<MDBCard
className="shadow-0 border border-dark border-5 text-dark"
style={{ borderRadius: "10px" }}
>
<MDBCardBody className="p-4">
<div className="row text-center">
<div
className="col-md-9 text-center border-end border-5 border-dark py-4"
style={{marginTop: '-1.5rem', marginBottom: '-1.5rem'}}
>
<div className="d-flex justify-content-around mt-3">
<p className="small">Toronto</p>
<p className="small">21.02.2021</p>
<p className="small">Rain map</p>
</div>
<div className="d-flex justify-content-around align-items-center py-5 my-4">
<p className="fw-bold mb-0" style={{fontSize: '7rem'}}>
-4°C
</p>
<div className="text-start">
<p className="small">10:00</p>
<p className="h3 mb-3">Sunday</p>
<p className="small mb-0">Cloudy</p>
</div>
</div>
<div className="d-flex justify-content-around align-items-center mb-3">
<div className="flex-column">
<i className="fas fa-minus"></i>
</div>
<div
className="flex-column border"
style={{borderRadius: '10px', padding: '.75rem'}}
>
<p className="small mb-1">Sun</p>
<p className="small mb-0">
<strong>-4°C</strong>
</p>
</div>
<div className="flex-column">
<p className="small mb-1">Mon</p>
<p className="small mb-0">
<strong>-4°C</strong>
</p>
</div>
<div className="flex-column">
<p className="small mb-1">Tue</p>
<p className="small mb-0">
<strong>-4°C</strong>
</p>
</div>
<div className="flex-column">
<p className="small mb-1">Wed</p>
<p className="small mb-0">
<strong>-4°C</strong>
</p>
</div>
<div className="flex-column">
<p className="small mb-1">Thu</p>
<p className="small mb-0">
<strong>-4°C</strong>
</p>
</div>
<div className="flex-column">
<p className="small mb-1">Fri</p>
<p className="small mb-0">
<strong>-4°C</strong>
</p>
</div>
<div className="flex-column">
<p className="small mb-1">Sat</p>
<p className="small mb-0">
<strong>-4°C</strong>
</p>
</div>
<div className="flex-column">
<i className="fas fa-minus"></i>
</div>
</div>
</div>
<div className="col-md-3 text-end">
<p className="small mt-3 mb-5 pb-5">For a month</p>
<p className="pb-1">
<span className="pe-2">11:00</span> <strong>-4°</strong>
</p>
<p className="pb-1">
<span className="pe-2">12:00</span> <strong>-4°</strong>
</p>
<p className="pb-1">
<span className="pe-2">13:00</span> <strong>-5°</strong>
</p>
<p className="pb-1">
<span className="pe-2">14:00</span> <strong>-7°</strong>
</p>
<p className="pb-1">
<span className="pe-2">15:00</span> <strong>-6°</strong>
</p>
<p className="pb-1">
<span className="pe-2">16:00</span> <strong>-4°</strong>
</p>
<p>
<span className="pe-2">17:00</span> <strong>-3°</strong>
</p>
</div>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</section>
);
}
Weather card UI
Beautiful weather widget styling, with basic weather info.
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCardImage,
MDBCol,
MDBContainer,
MDBIcon,
MDBRipple,
MDBRow,
MDBTypography,
} from "mdb-react-ui-kit";
export default function CardUI() {
return (
<section className="vh-100" style={{ backgroundColor: "#eee" }}>
<MDBContainer className="h-100">
<MDBRow className="justify-content-center align-items-center h-100">
<MDBCol md="8" lg="6" xl="4">
<MDBCard style={{ borderRadius: "10px" }}>
<MDBRipple
tag="div"
className="bg-image"
rippleColor="light"
style={{
borderTopLeftRadius: "10px",
borderTopRightRadius: "10px",
}}
>
<MDBCardImage
src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-weather/draw2.webp"
className="w-100"
/>
<div
className="mask"
style={{ backgroundColor: "rgba(0,0,0,.45)" }}
>
<div className="d-flex justify-content-between p-4">
<a href="#!" className="text-white">
<MDBIcon fas icon="chevron-left" size="lg" />
</a>
<a href="#!" className="text-white">
<MDBIcon fas icon="cog" size="lg" />
</a>
</div>
<div className="text-center text-white">
<p className="h3 mb-4">Clear night</p>
<p className="h5 mb-4">Detroit, US</p>
<p className="display-2">
<strong>20°C</strong>{" "}
</p>
</div>
</div>
</MDBRipple>
<MDBCardBody className="p-4 text-center">
<a href="#!" className="text-body">
<MDBIcon fas icon="chevron-up mb-4" size="lg" />
</a>
<div className="d-flex justify-content-between mb-3">
<p className="h5 fw-normal">Yesterday</p>
<p className="h5 fw-normal">
<MDBIcon fas icon="sun pe-2" /> 23°C
</p>
</div>
<div
className="d-flex justify-content-between"
style={{ color: "#aaa" }}
>
<p className="h5 fw-normal">Tommorow</p>
<p className="h5 fw-normal">
<MDBIcon fas icon="cloud pe-2" /> 21°C
</p>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</section>
);
}