Pieces

Compact, self-contained widgets that behave like assets. Drop them into any block, card, or page to add a small touch of polish without rewriting the surrounding UI.

Istanbul
22°C
Sunny
H:25°L:14°· Feels 24°

Hero Weather

weather4

Big tabular temperature anchored under a city header and condition icon, with high, low, and feels-like below.

Humidity64%
Wind12 km/hNE
Pressure1018 hPa
UV Index6High

Weather Metrics

weather5

Four-cell grid of atmospheric stats with uppercase labels, bold tabular values, and an optional detail line.

SunriseSunset
6:14 AM8:42 PM
Daylight 14h 28m

Sunrise & Sunset

weather6

Sunrise and sunset times bracketing a thin track with an amber sun marker positioned by day progress.

PrecipitationNext 6h
10%
Now
25%
11
60%
12
95%
1
78%
2
35%
3

Precipitation Bars

weather7

Six-hour rain probability column chart with sky-blue bars rising on a muted track and percentages on top.

12km/h
NE windGust 18 km/h

Wind Compass

weather8

Cardinal-marked SVG dial with a sky pointer rotated to a compass direction, paired with speed and gust.

Air Quality
42
GoodUS AQI
PM2.512O₃32NO₂8

Air Quality Index

weather9

Color-graded AQI tile next to its level name, with a thin border separating a pollutant breakdown row.

Heat AdvisoryAdvisory

Heat index up to 38°C this afternoon. Stay hydrated and avoid direct sun.

Until 9:00 PM tonight

Weather Alert

weather10

Severity-colored triangle alert with title, severity badge, descriptive detail, and an Until line.