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 & more

Basic weather widget

Simple weather card with temperature, wind & humidity metrics.

Warsaw

15:07

13°C

Stormy

40 km/h

84%

0.2h

Show code

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.

Check the weather forecast

Check!

Celsius

Farenheit

New York, US

Current temperature: 5.42°C

Feels like: 4.37°C

Max: 6.11°C, Min: 3.89°C

Scattered Clouds

Show code

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

Day after tomorrow

Show code

HTML
JavaScript

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

21°C

12:00

2°C

1:00

20°C

2:00

19°C

3:00

18°C

4:00

21°C

Mon

20°C

Tue

16°C

Wed

17°C

Thu

18°C

Fri

Show code

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.

Juneau, Alaska, US

1.28°C

Feels Like: -1.08 °C

Snowy

Show code

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°

Show code

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.

Clear night

Detroit, US

20°C

Yesterday

23°C

Tommorow

21°C

Show code

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>
  );
}

Weather

React Bootstrap 5 Weather templates & widgets

Basic weather widget

Warsaw

15:07

13°C

Weather App

Check the weather forecast

New York, US

Weather dashboard with API

Weather card

23°C

Current Weather info card

Juneau, Alaska, US

Snowy

Weather report

Weather card UI

Related resources