Six-hour rain probability column chart with sky-blue bars rising on a muted track and percentages on top.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Weather7 } from "@/components/beste/piece/weather7";
<Weather7
hours={[
{
"label": "Now",
"chance": 10
},
{
"label": "11",
"chance": 25
},
{
"label": "12",
"chance": 60
},
{
"label": "1",
"chance": 95
},
{
"label": "2",
"chance": 78
},
{
"label": "3",
"chance": 35
}
]}
/>Six-column hourly strip pairing each label with a condition icon and a tabular temperature.
Row of day columns with weekday label, condition icon, and a high/low temperature pair.
Big tabular temperature anchored under a city header and condition icon, with high, low, and feels-like below.
Four-cell grid of atmospheric stats with uppercase labels, bold tabular values, and an optional detail line.
City name, big temperature, condition label, and a high/low line with an icon tile that colors by condition.
Sunrise and sunset times bracketing a thin track with an amber sun marker positioned by day progress.