Trip planner
A route-planning workspace: an itinerary whose stages reorder, a map of the route with an elevation profile that moves a marker along it, and an assistant with a packing checklist.
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 { TripPlanner } from "@/components/miyuki-ui/trip-planner";
import { topo } from "@/registry/lib/art";
import { people } from "@/registry/lib/data";
const party = ["Aiko Tanaka", "Lars Eriksen", "Mei Watanabe"].map((name) => {
const p = people.find((x) => x.name === name) ?? people[0];
return { name: p.name, role: p.role, avatar: p.avatar };
});
export default function TripPlannerDemo() {
return <TripPlanner map={topo("kamoshika-traverse", { width: 1200, height: 760 })} party={party} />;
}Install
npx shadcn@latest add @miyuki-ui/trip-plannerThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
TripPlanner
Prop
Type
Ticket booking
Booking a reserved train seat from start to finish: route, time, seats and payment on stepping stones, a running summary beside them, and the ticket with a tear-off stub at the end.
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.