The Weather Card displays current weather information with a dynamic themed interface that adapts to weather conditions. It includes temperature unit conversion, forecast display, and detailed weather metrics.
Preview import { WeatherCard } from "@/components/ui/weather-card" ; const weatherData = { coord: { lon: - 122.4194 , lat: 37.7749 }, weather: [{ id: 800 , main: "Clear" , description: "clear sky" , icon: "01d" }], main: { temp: 22 , feels_like: 21 , temp_min: 18 , temp_max: 25 , pressure: 1013 , humidity: 60 }, visibility: 10000 , wind: { speed: 3.5 , deg: 180 }, dt: 1699641600 , sys: { country: "US" , sunrise: 1699622400 , sunset: 1699660800 }, timezone: - 28800 , name: "San Francisco" , location: { city: "San Francisco" , country: "United States" , region: "California" } }; export default function Example () { return < WeatherCard weatherData = { weatherData } /> ; }
Installation npx shadcn@latest add "https://ui.heygaia.io/r/weather-card"
Install dependencies
npm install @hugeicons/react
Add icons component
Copy the icons wrapper component from icons
Copy the source code
Copy the weather card components:
weather-card.tsxweather-detail-item.tsxweather-icons.tsx Usage Basic Usage import { WeatherCard } from "@/components/ui/weather-card" ; < WeatherCard weatherData = { weatherData } />
With Forecast const weatherDataWithForecast = { ... weatherData , forecast: [ { date: "2024-03-04" , timestamp: 1699728000 , temp_min: 15 , temp_max: 23 , humidity: 65 , weather: { main: "Clouds" , description: "partly cloudy" , icon: "02d" } }, // ... more days ] }; < WeatherCard weatherData = { weatherDataWithForecast } showForecast = { true } />
Temperature Units // Default to Fahrenheit < WeatherCard weatherData = { weatherData } defaultUnit = "fahrenheit" /> // Default to Celsius < WeatherCard weatherData = { weatherData } defaultUnit = "celsius" />
Without Details Section < WeatherCard weatherData = { weatherData } showDetails = { false } />
Props The weather data object containing all weather information Show WeatherData properties
Location information
city: string - City namecountry: string | null - Country nameregion: string | null - Region/state name weather
WeatherCondition[]
required
Array of weather conditions
id: number - Weather condition IDmain: string - Weather category (Clear, Clouds, Rain, etc.)description: string - Detailed descriptionicon: string - Weather icon code Main weather metrics
temp: number - Current temperature (Celsius)feels_like: number - Feels like temperaturetemp_min: number - Minimum temperaturetemp_max: number - Maximum temperaturepressure: number - Atmospheric pressure (hPa)humidity: number - Humidity percentage Wind information
speed: number - Wind speed (m/s)deg: number - Wind direction (degrees) System information
country: string - Country codesunrise: number - Sunrise timestampsunset: number - Sunset timestamp Timezone offset in seconds
Visibility in meters (optional)
Array of forecast days (optional)
date: string - Date stringtimestamp: number - Timestamptemp_min: number - Min temperaturetemp_max: number - Max temperaturehumidity: number - Humidity percentageweather: object - Weather condition Whether to show the weekly forecast section
Whether to show additional weather information (wind, humidity, etc.)
defaultUnit
'celsius' | 'fahrenheit'
default: "'celsius'"
Default temperature unit to display
Additional CSS classes to apply to the card
Features Dynamic Weather Themes The card automatically adapts its gradient background and icon colors based on weather conditions:
Clear : Warm yellow-to-orange gradientClouds : Blue-to-slate gradientRain : Dark blue-to-gray gradientSnow : Light blue gradientThunderstorm : Purple-to-slate gradientFog/Mist : Gray gradientAnd many more atmospheric conditions
Temperature Unit Toggle Users can easily switch between Celsius and Fahrenheit using the thermometer icon dropdown menu.
Expandable Sections Both the forecast and additional information sections are collapsible, allowing users to control the card’s height.
Weather Icons Custom weather icons that match the current conditions, with color coding that aligns with the card’s theme.
Data Source This component is designed to work with data from weather APIs like OpenWeatherMap. The weather condition IDs follow the OpenWeatherMap weather condition codes .
Accessibility
Semantic HTML structure
ARIA labels on interactive elements
Keyboard navigation support
Screen reader friendly
Temperature values should be provided in Celsius. The component handles conversion to Fahrenheit automatically.