wxcn

A little atmosphere for your interface.

Weather, moon, and tide components for Svelte, React, and Vue.
Built on native shadcn primitives. Shaped by your theme. Yours to customize.

Components · Playground · Developer experience · MIT license [blocked]

Svelte 5   /   React 19   /   Vue 3   /   Tailwind CSS 4   /   LayerChart 2

The components

A forecast at a glance, a view of the lunar cycle, or the next turn of the tide. Each card adapts to its container, with optional detail levels and units. Your project's colors, base components, radius, and selected icon library carry through.

Weather	Moon	Tides
Temperature, wind, and forecast periods with optional cloud, rain, and snow backgrounds.	A phase illustration, illumination, and astronomically calculated lunar-cycle dates.	An interactive prediction curve, current water level, and surrounding high/low events.

_{Actual components, photographed in an isolated preview with example data. Still images capture one frame of the animated backgrounds.}

Make it yours

Explore a wide canvas of mixed cards, or open a component collection to compare its variants. Resize a preview to see its typography adapt. Switch colors, fonts, icons, density, and units; use Shuffle to explore, Open to load a shadcn-svelte preset, and Get Code to install a component.

• Native to your project. Registry installation follows components.json, including aliases and supported icon mappings. Svelte and React support Lucide, Tabler, Hugeicons, Phosphor, or Remix icons; Vue applies those mappings to navigation arrows while weather glyphs retain their canonical Lucide shapes.
• Light and dark, naturally. Cards inherit your theme tokens. The registry adds no global theme or font.
• Motion with restraint. Atmospheric backgrounds sit behind readable information. Rain and snow respect reduced motion; offscreen animations pause.
• Location-aware previews. Browser location loads local US weather and coastal tides. Tides automatically use the nearest coastal station, including for inland visitors. Unavailable data stays clearly labeled.

Svelte, React, and Vue are available today.

Build with wxcn

Add the source to your project

Run the playground locally and open Get code, or visit its Registry page. Both use shadcn-svelte's PMBlock to provide the correct pnpm, npm, Yarn, or Bun command for your registry origin.

React items use the /r/react/<component>.json endpoints and the same component names. The React registry installs native React components, Recharts, and the configured shadcn primitives. Its icon adapter supports Lucide, Tabler, Phosphor, Hugeicons, and Remixicon through the consumer's configured icon library.

Vue items use /r/vue/<component>.json with shadcn-vue@latest and install native Vue components using the same component names and shared data contracts. Weather glyphs retain their canonical Lucide shapes where shadcn-vue has no equivalent icon mapping; navigation arrows follow the configured icon library.

The CLI resolves the required card and badge primitives from your configuration. Supported icon mappings are applied at installation time; the playground's icon picker lets you preview those choices. Vue weather glyphs retain their canonical Lucide shapes.

Compose a forecast

After installing the registry components:

<script lang="ts">	import WeatherForecast from '$lib/components/wxcn/WeatherForecast.svelte';	import MoonForecast from '$lib/components/wxcn/MoonForecast.svelte';	import TideForecast from '$lib/components/wxcn/TideForecast.svelte';</script>
<div class="grid items-start gap-4 md:grid-cols-3">	<WeatherForecast unit="celsius" windUnit="km/h" background="realistic" />	<MoonForecast type="simple" />	<TideForecast unit="meter" density="compact" /></div>

For React, install the React endpoint and compose the native components in TSX:

import WeatherForecast from '@/components/wxcn/weather-forecast';import MoonForecast from '@/components/wxcn/moon-forecast';import TideForecast from '@/components/wxcn/tide-forecast';
<div className="grid items-start gap-4 md:grid-cols-3">	<WeatherForecast unit="celsius" windUnit="km/h" />	<MoonForecast type="simple" />	<TideForecast unit="meter" density="compact" /></div>;

These defaults render example data. Supply your own currentWeather observation and forecast, tide predictions, series, and reading for a live interface; set sourceLabel to identify the data.

For weather, showTemperatureTrend adds “Going up to 92° today” or “Going down to 74° tonight.” Pass currentWeather.highToday (in its temperatureUnit) to stop the upward sentence once the day's high has been reached, even if it subsequently cools. showHighLow independently adds high/low arrows using your selected icon library. Both default to false and respect unit.

<WeatherForecast	{location}	{currentWeather}	{forecast}	showTemperatureTrend	showHighLow	unit="celsius"/>

currentWeather uses the exported CurrentWeather type, including observedAt and optional highToday / lowToday. Display time zones use explicit timeZone, then location.timeZone, then the browser time zone after hydration; SSR falls back to UTC when neither prop supplies a time zone. If a live observation is unavailable, pass null; the forecast remains visible without presenting a forecast high as the current temperature. The website's /api/forecast response supplies both currentWeather and forecast; bring your own data provider when installing the card.

All unit props are optional. Defaults are Fahrenheit, mph, and feet. The dashboard exposes weatherUnit, windUnit, and tideUnit independently.

Know your data

Weather keeps the latest station observation separate from NWS forecast highs and lows. Tides use NOAA MLLW heights and offset-aware timestamps; a fresh observation takes precedence, while readings older than 30 minutes fall back to a labeled prediction. Extrema alone never fabricate a current reading. Display times follow the explicit timeZone, location.timeZone, browser-after-hydration precedence described above.

Sun and Moon positions, lunar illumination, and full/new moon dates are calculated locally with Astronomy Engine. Weather skies follow the location and timestamp through sunrise, midday, sunset, and night. The fixed sky panorama uses calculated azimuth and altitude; discs are enlarged, and clouds are illustrative. The Sky time picker previews real rise/set and solar transit times. The playground does not save location coordinates in browser storage.

Work locally

Use the pnpm version pinned in package.json [blocked] to install dependencies, then start the playground with pnpm dev.

Component source lives in packages/svelte/src/components/wxcn [blocked], packages/react/src/components/wxcn [blocked], and packages/vue/src/components/wxcn [blocked], with shared data and calculations in packages/core [blocked]. tooling/registry/build.mjs [blocked] generates all three installable registries from that source. For registry-only iteration, use the registry:build package script before testing an install.

Contributing & credits

Contributions are welcome. Preserve the shared theme and data contracts across all three frameworks.

Built with shadcn-svelte and LayerChart. The playground layout and controls are adapted from shadcn-svelte PR #2755. See third-party notices [blocked] for attribution.

MIT licensed [blocked].

Contributing across frameworks

The pnpm workspace separates the Astro website (apps/web), native framework components (packages/svelte, packages/react, and packages/vue), and shared TypeScript logic (packages/core).

Svelte registry items are available at /r/svelte/<component>.json. Existing /r/<component>.json URLs remain compatible. See CONTRIBUTING.md [blocked] for setup, framework adapters, parity requirements, and deployment configuration.

Agent documentation

Every public page has a Markdown version: use /index.md, /docs/components.md, /docs/endpoints.md, or /shader-preview.md, or request the normal URL with Accept: text/markdown. /llms.txt lists these pages. Component Markdown includes usage, installation steps, and the same source files as the manual code viewer.

The wxcn skill [blocked] provides registry installation, data-prop, theming, and contribution guidance. Install it with npx skills add maxffarrell/wxcn-svelte --skill wxcn.

Production site: wxcn.dev. The Astro site serves native Svelte, React, and Vue previews and documentation. Production deployment is handled by the linked Cloudflare Workers Builds project.