wxcn

Overview

wxcn is a set of weather, moon phase and tide forecast components that inherit a project's shadcn/ui theme, base components and icon library. It is available for React, Vue and Svelte, and includes a ForecastDashboard that composes all three cards.

The cards are built for real data. The site's own API uses the National Weather Service for US forecasts and NOAA for tide predictions, while moon phase, illumination and cycle dates are calculated locally with Astronomy Engine. Registry installs copy the components and fetch helpers but not the website's API routes, so projects supply their own data provider. A customizer on the site previews style, theme, font, units, data density and background before copying the code.

Features

• Weather card: Current conditions, today's high or tonight's low trend, wind and a seven-day forecast.
• Tide card: Nearest coastal station, high and low predictions, a predicted curve and the current water level on the MLLW datum.
• Moon card: Phase, illumination, moon age and next full and new moon dates, plus a weekly phase table.
• Interactive mode: Optional in-card navigation to week views and day details, with Back and Escape restoring focus.
• Realistic backgrounds: Sky backgrounds computed from observer-specific Sun and Moon positions.
• Time zones and units: Explicit IANA time zones, Fahrenheit or Celsius, feet or meters, and wind speed units.
• Fetch helpers: fetchWeatherForecast and fetchTidePredictions for known locations and stations.

Tech stack

• React, Vue or Svelte
• shadcn/ui
• Astronomy Engine
• National Weather Service and NOAA data

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @wxcn/component-name