# Forecast dashboard

> Weather and moon for Austin, with a separate coastal tide card.

A shadcn/ui block from the [@wxcn](https://wxcn.dev/react) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/wxcn/forecast-dashboard).

- Page, with a live preview: https://shadcn.exchange/r/wxcn/forecast-dashboard
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/wxcn/forecast-dashboard-light-be10fce9c85fa821.png
- Registry item: https://wxcn.dev/r/react/forecast-dashboard.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://wxcn.dev/r/react/forecast-dashboard.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://wxcn.dev/r/react/weather-forecast.json`, `https://wxcn.dev/r/react/moon-forecast.json`, `https://wxcn.dev/r/react/tide-forecast.json`

## Files

### `packages/react/src/components/wxcn/forecast-dashboard.tsx`

```tsx
import type { IconSet } from './forecast-icons';
import type {
	ForecastType,
	LocationInput,
	TideUnit,
	WeatherUnit,
	CurrentWeather,
	WeatherBackground,
	WeatherPeriod
} from '@/lib/wxcn/types.js';
import { WeatherForecast } from './weather-forecast';
import { TideForecast } from './tide-forecast';
import { MoonForecast } from './moon-forecast';

export type ForecastDashboardProps = {
	interactive?: boolean;
	iconType?: IconSet;
	timeZone?: string;
	type?: ForecastType;
	size?: 'sm' | 'default' | 'lg';
	density?: 'compact' | 'comfortable';
	weatherUnit?: WeatherUnit;
	windUnit?: 'mph' | 'km/h' | 'm/s' | 'knots';
	tideUnit?: TideUnit;
	background?: WeatherBackground;
	showTemperatureTrend?: boolean;
	showHighLow?: boolean;
	currentWeather?: CurrentWeather | null;
	hourlyForecast?: WeatherPeriod[];
	location?: LocationInput;
	tideLocation?: LocationInput;
};

export function ForecastDashboard({
	interactive = false,
	iconType,
	timeZone,
	type = 'summary',
	size = 'default',
	density = 'comfortable',
	weatherUnit = 'fahrenheit',
	windUnit = 'mph',
	tideUnit = 'ft',
	background = 'none',
	showTemperatureTrend = false,
	showHighLow = false,
	currentWeather,
	hourlyForecast,
	tideLocation,
	location
}: ForecastDashboardProps) {
	return (
		<div className="@container/dashboard w-full">
			<div className="grid items-start gap-4 @min-[38rem]/dashboard:grid-cols-2 @min-[52rem]/dashboard:grid-cols-3">
				<div className="min-w-0 @min-[38rem]/dashboard:col-span-2 @min-[52rem]/dashboard:col-span-1">
					<WeatherForecast
						interactive={interactive}
						iconType={iconType}
						timeZone={timeZone}
						type={type}
						size={size}
						density={density}
						unit={weatherUnit}
						windUnit={windUnit}
						location={location}
						background={background}
						showTemperatureTrend={showTemperatureTrend}
						showHighLow={showHighLow}
						currentWeather={currentWeather}
						hourlyForecast={hourlyForecast}
					/>
				</div>
				<TideForecast
					interactive={interactive}
					iconType={iconType}
					timeZone={timeZone}
					type={type}
					size={size}
					density={density}
					unit={tideUnit}
					location={tideLocation}
				/>
				<MoonForecast
					interactive={interactive}
					iconType={iconType}
					timeZone={timeZone}
					type={type}
					size={size}
					density={density}
					location={location}
				/>
			</div>
		</div>
	);
}

export default ForecastDashboard;
```