Weather Card

Cards 56

About

Here is Weather Card component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Weather Card to your project and fits it to your theme.

Code

How Weather Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import * as React from "react"
import WeatherCard from "@/components/ui/weather-card"
import type { GetWeatherResult } from "@/components/ui/weather-card"

export default function Demo() {
  const mock: GetWeatherResult = {
    location: "Tbilisi, GE",
    unit: "C",
    temperature: 27,
    condition: "Partly cloudy",
    high: 29,
    low: 20,
    humidity: 0.58,
    windKph: 14,
    icon: "weather-partly",
  }

  return <WeatherCard data={mock} />
}