Skip to content
0
Customize

Components

Weather, moon, and tide components for Vue that inherit your shadcn-vue 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

Loading current tide time…

Moon phase
Austin, TX

Waning Crescent

24% illuminated

Moon age
25 days
Next full moon
Sep 26
Next new moon
Sep 11
<script setup lang="ts">
import ForecastDashboard from '@/components/wxcn/ForecastDashboard.vue';
</script>

<template><ForecastDashboard interactive background="realistic" /></template>

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-vue@latest add https://wxcn.dev/r/vue/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

<script setup lang="ts">
import WeatherForecast from '@/components/wxcn/WeatherForecast.vue';
</script>

<template>
	<WeatherForecast
		interactive
		unit="celsius"
		background="realistic"
		show-temperature-trend
		show-high-low
	/>
</template>

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-vue@latest add https://wxcn.dev/r/vue/weather-forecast.json

TideForecast

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

Tides
Galveston Pier 21, TX

Loading current tide time… 

<script setup lang="ts">
import TideForecast from '@/components/wxcn/TideForecast.vue';
</script>

<template><TideForecast interactive unit="meter" /></template>

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-vue@latest add https://wxcn.dev/r/vue/tide-forecast.json

MoonForecast

Lunar phase, illumination, and astronomical cycle dates.

Moon phase
Austin, TX

Waning Crescent

24% illuminated

Moon age
25 days
Next full moon
Sep 26
Next new moon
Sep 11
<script setup lang="ts">
import MoonForecast from '@/components/wxcn/MoonForecast.vue';
</script>

<template><MoonForecast interactive /></template>

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-vue@latest add https://wxcn.dev/r/vue/moon-forecast.json