Weather
An answer card for a weather question, with today's conditions and the next few days.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/weather.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/weather.json
Usage & API
Example
import { WeatherArt } from "@/components/ai/weather"
<WeatherArt
condition={condition}
/>Props WeatherArt
| Prop | Type & description | Required |
|---|---|---|
condition | Condition | Required |
size | number | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Forecast is the only variant. The sample place is Lisbon and the unit starts at C. Thursday 29 October is partly cloudy, high 22 and low 15, 10 percent rain, wind 14, humidity 62, with a note that clouds clear by mid-afternoon. Friday is sunny and clear, good for the coast. Saturday is light rain, high 18, 70 percent rain, wind 24, and the note says to take a jacket. Sunday is cloudy and mostly dry. Monday is sunny again. The first button reads Today and the hero says Now until another day is chosen. Switching to F converts the highs and lows and leaves rain, wind and humidity alone. The art and the note crossfade with the selected day. There is no hourly row and no map.
Choosing a layout
Use it when the question names a place and a few days, and the answer should be scannable: what it is doing now, what the note says, and which day later in the stretch turns wet. The note is the sentence the model would otherwise have buried, such as a shower arriving late morning. Keep the selected index in your state so a later message can point at a day. The unit is also yours, so a person's preference can outlive the card.
A chart is the better fit when the numbers are a series you chose, signups or active users, with a legend and a tooltip, not a forecast. A data table is the better fit when there are many rows and the person will sort or download them. An itinerary is the better fit when the subject is a trip's stops and a route, even if the weather mattered to the plan. The weather card does not list places to go. It lists days. A calendar event is one meeting, not a forecast.
Does Fahrenheit change the wind or the rain chance?
No. The unit switch only converts the high and the low, using the standard scale and rounding to the nearest degree. Rain stays a percent, humidity stays a percent, and wind stays the number you passed, labelled km/h. If you store wind in miles per hour, convert it before you pass the day, because the card will not.
Where does the forecast come from?
From the days prop. The card has no request, no API key and no geocoding. The place is a string, and Now is simply what it prints when the selected index is 0. If your payload has more or fewer than five days, the radio row still renders one button per day on a five-column grid, so five is the layout the sample was drawn for.