Skip to content
0
Customize

Components

Weather, moon, and tide components for React that inherit your shadcn/ui theme, base components, and icon library.

Time zones

All cards use an explicit IANA timeZone prop first, then location.timeZone, then the visitor’s browser time zone after hydration (UTC during server rendering). ForecastDashboard forwards its explicit timeZone prop to all three cards. Location coordinates and the provider’s time zone remain separate from the display time zone.

ForecastDashboard

All three components, composed into a dashboard.

Weather
Austin, TX

Now

86°

Mostly Sunny

WindS 5 to 10 mph
92°
74°
94°
75°
89°

Sample forecast

Tides
Galveston Pier 21, TX

Example water level

0.9ft

Rising toward high tide

11:30 AM

12:00 AMMLLW · predicted curve12:00 AM

Previous low tide

8:28 AM

0.4 ft

Next high tide

2:49 PM

1.5 ft

High tideSep 6, 2:49 PM1.5 ft
Low tideSep 6, 9:07 PM0.3 ft
High tideSep 7, 2:49 AM1.8 ft
Low tideSep 7, 9:05 AM0.4 ft

Sample tides

Moon phase
Austin, TX

Waning Crescent

24% illuminated

Moon age
25 days
Next full moon
Sep 26
Next new moon
Sep 11
import { ForecastDashboard } from '@/components/wxcn/forecast-dashboard';

export default function Example() {
	return (
		<div className="w-full">
			<ForecastDashboard interactive background="realistic" />
		</div>
	);
}

Interactive forecasts

Set interactive to enable navigation inside each card; it defaults to false. Small and simple cards have a subtle View week action in the top-right corner. Weather and tide cards that already display the forecast list open daily details directly from each entry. Moon cards offer a weekly phase table.

Day details reuse the original card layout with the selected day's data, preserving its dimensions without an internal scroll area. Week screens use a compact responsive grid for the available days. Tide cards show an Upcoming tides summary, while day buttons remain available from the detailed tide list. Back and Escape return to the previous screen and restore focus. Weather details use the selected day's conditions for the chosen background. ForecastDashboard forwards interactive to all three cards.

Weather and tides show supplied periods only, up to seven days; missing days are not filled in. Moon summaries use astronomical phase calculations anchored to the supplied forecast date. Set timeZone or location.timeZone to group days in the local calendar.

Installation 

pnpm dlx shadcn@latest add https://wxcn.dev/r/react/forecast-dashboard.json

WeatherForecast

Forecast periods with optional atmospheric backgrounds.

Weather
Austin, TX

Now

30°

Mostly Sunny

Going up to 33° today

33° 23°
WindS 5 to 10 mph
33°
23°
34°
24°
32°

Sample forecast

import { WeatherForecast } from '@/components/wxcn/weather-forecast';

export default function Example() {
	return (
		<div className="w-full max-w-sm">
			<WeatherForecast
				interactive
				unit="celsius"
				background="realistic"
				showTemperatureTrend
				showHighLow
			/>
		</div>
	);
}

Use background on WeatherForecast or ForecastDashboard: "none" (default) keeps the plain card, "realistic" animates a photographic cloud texture. Dithered and gradient backgrounds are temporarily disabled while their visual design is improved; existing values render a plain card. Realistic backgrounds respect reduced motion and pause offscreen.

Location-aware skies

Backgrounds use location.latitude, location.longitude, and at to calculate the Sun and Moon with Astronomy Engine. Live cards update every minute; sample cards use their sample date. Day details use the selected period's start time. Sunrise and sunset colors follow solar altitude, including nighttime rain, snow, and clouds.

The sky is a fixed panorama: north at both edges, east at one quarter, south in the middle, west at three quarters. Height follows altitude. Sun and Moon discs are enlarged for readability; the Moon shows its calculated illuminated fraction and local tilt, and bodies below the horizon are hidden. Clouds can obscure them. This is an illustrative sky, not a camera-aligned view or a forecast of exact cloud locations.

Pass an explicit at timestamp to preview a moment. The homepage's Sky time picker finds actual rise, set, and solar transit times; polar locations may have no sunrise or sunset on the preview date.

Current conditions and temperature outlook

Pass a currentWeather observation separately from forecast periods. The main temperature always shows the observation. If it is unavailable, pass null.

showTemperatureTrend adds the daytime high or tonight's low as a sentence. Provide currentWeather.highToday to stop the upward sentence after the high has been reached. showHighLow independently shows high and low arrows using your project's icon library. Both props default to false and respect unit.

Set an explicit timeZone first; otherwise cards use location.timeZone, then the visitor's browser time zone after hydration. Server rendering falls back to UTC when neither prop supplies a time zone.

Interactive forecasts

Set interactive to enable navigation inside each card; it defaults to false. Small and simple cards have a subtle View week action in the top-right corner. Weather and tide cards that already display the forecast list open daily details directly from each entry. Moon cards offer a weekly phase table.

Day details reuse the original card layout with the selected day's data, preserving its dimensions without an internal scroll area. Week screens use a compact responsive grid for the available days. Tide cards show an Upcoming tides summary, while day buttons remain available from the detailed tide list. Back and Escape return to the previous screen and restore focus. Weather details use the selected day's conditions for the chosen background. ForecastDashboard forwards interactive to all three cards.

Weather and tides show supplied periods only, up to seven days; missing days are not filled in. Moon summaries use astronomical phase calculations anchored to the supplied forecast date. Set timeZone or location.timeZone to group days in the local calendar.

Installation 

pnpm dlx shadcn@latest add https://wxcn.dev/r/react/weather-forecast.json

TideForecast

Nearest coastal tides, with a current reading and interactive prediction curve.

Tides
Galveston Pier 21, TX

Example water level

0.3m

Rising toward high tide

11:30 AM

12:00 AMMLLW · predicted curve12:00 AM

Previous low tide

8:28 AM

0.1 m

Next high tide

2:49 PM

0.5 m

High tideSep 6, 2:49 PM0.5 m
Low tideSep 6, 9:07 PM0.1 m
High tideSep 7, 2:49 AM0.5 m
Low tideSep 7, 9:05 AM0.1 m

Sample tides

import { TideForecast } from '@/components/wxcn/tide-forecast';

export default function Example() {
	return (
		<div className="w-full max-w-sm">
			<TideForecast interactive unit="meter" />
		</div>
	);
}

Interactive forecasts

Set interactive to enable navigation inside each card; it defaults to false. Small and simple cards have a subtle View week action in the top-right corner. Weather and tide cards that already display the forecast list open daily details directly from each entry. Moon cards offer a weekly phase table.

Day details reuse the original card layout with the selected day's data, preserving its dimensions without an internal scroll area. Week screens use a compact responsive grid for the available days. Tide cards show an Upcoming tides summary, while day buttons remain available from the detailed tide list. Back and Escape return to the previous screen and restore focus. Weather details use the selected day's conditions for the chosen background. ForecastDashboard forwards interactive to all three cards.

Weather and tides show supplied periods only, up to seven days; missing days are not filled in. Moon summaries use astronomical phase calculations anchored to the supplied forecast date. Set timeZone or location.timeZone to group days in the local calendar.

Installation 

pnpm dlx shadcn@latest add https://wxcn.dev/r/react/tide-forecast.json

MoonForecast

Lunar phase, illumination, and astronomically calculated cycle dates.

Moon phase
Austin, TX

Waning Crescent

24% illuminated

Moon age
25 days
Next full moon
Sep 26
Next new moon
Sep 11
import { MoonForecast } from '@/components/wxcn/moon-forecast';

export default function Example() {
	return (
		<div className="w-full max-w-sm">
			<MoonForecast interactive />
		</div>
	);
}

Interactive forecasts

Set interactive to enable navigation inside each card; it defaults to false. Small and simple cards have a subtle View week action in the top-right corner. Weather and tide cards that already display the forecast list open daily details directly from each entry. Moon cards offer a weekly phase table.

Day details reuse the original card layout with the selected day's data, preserving its dimensions without an internal scroll area. Week screens use a compact responsive grid for the available days. Tide cards show an Upcoming tides summary, while day buttons remain available from the detailed tide list. Back and Escape return to the previous screen and restore focus. Weather details use the selected day's conditions for the chosen background. ForecastDashboard forwards interactive to all three cards.

Weather and tides show supplied periods only, up to seven days; missing days are not filled in. Moon summaries use astronomical phase calculations anchored to the supplied forecast date. Set timeZone or location.timeZone to group days in the local calendar.

Installation 

pnpm dlx shadcn@latest add https://wxcn.dev/r/react/moon-forecast.json