Templates
Weather station
The home screen of a mountain weather service: the current reading set very large, the week ahead, snow stakes, wind rose and barometer in a row, then radar beside the active alerts.
This example uses generated pictures and sample data from this site: art.ts and data.ts. Copy those files from the repository, or use your own images and data in their place.
"use client";
import { WeatherStation } from "@/components/miyuki-ui/weather-station";
import { topo } from "@/registry/lib/art";
import { people } from "@/registry/lib/data";
const yuna = people.find((p) => p.name === "Yuna Sato") ?? people[0];
export default function WeatherStationDemo() {
return (
<WeatherStation
user={{ name: yuna.name, email: "yuna@shirakaba.example", avatar: yuna.avatar }}
radarMap={topo("hakuba-radar", { width: 1200, height: 520 })}
/>
);
}Install
npx shadcn@latest add @miyuki-ui/weather-stationThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
WeatherStation
Prop
Type