Operations Home
The operations home of a weather service: season earnings, recent sign-ups, revenue by week, month or year, a year of bulletins and a customers table, all filtered by region.
This example uses sample data from this site: data.ts, which also needs art.ts. Copy those files from the repository, or use your own data in their place.
"use client";
import { OperationsHome } from "@/components/miyuki-ui/operations-home";
import { people } from "@/registry/lib/data";
const avatars = Object.fromEntries(people.map((p) => [p.name, p.avatar]));
export default function OperationsHomeDemo() {
return <OperationsHome user={{ name: "Yuna Sato", email: "yuna@shirakaba.example" }} avatars={avatars} />;
}Install
npx shadcn@latest add @miyuki-ui/operations-homeThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
OperationsHome
Prop
Type
Observatory
A public observatory's night page: tonight's sky with seeing, cloud cover and moonrise, an hour-by-hour chart, the moon with a two-week strip, the sun's arc, a month of events, a booking card and a visitor notice.
Patient Summary
A patient summary for a mountain clinic: identity and key facts, vitals, allergies and medications, sleep, activity and steps from a wearable, upcoming appointments and visit history, with booking and messaging.