Row of day columns with weekday label, condition icon, and a high/low temperature pair.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Weather2 } from "@/components/beste/piece/weather2";
<Weather2
days={[
{
"label": "Mon",
"condition": "sunny",
"high": 24,
"low": 15
},
{
"label": "Tue",
"condition": "cloudy",
"high": 22,
"low": 14
},
{
"label": "Wed",
"condition": "rainy",
"high": 18,
"low": 12
},
{
"label": "Thu",
"condition": "cloudy",
"high": 19,
"low": 13
},
{
"label": "Fri",
"condition": "sunny",
"high": 25,
"low": 16
}
]}
/>Six-column hourly strip pairing each label with a condition icon and a tabular temperature.
City name, big temperature, condition label, and a high/low line with an icon tile that colors by condition.
Big tabular temperature anchored under a city header and condition icon, with high, low, and feels-like below.
Heat index up to 38°C this afternoon. Stay hydrated and avoid direct sun.
Until 9:00 PM tonightSeverity-colored triangle alert with title, severity badge, descriptive detail, and an Until line.
Six-hour rain probability column chart with sky-blue bars rising on a muted track and percentages on top.
Four-cell grid of atmospheric stats with uppercase labels, bold tabular values, and an optional detail line.