Ryokan
A hot spring inn's landing page and booking: the valley with steam rising, three rooms, the baths with live hours and occupancy, a seasonal dinner menu, a small line map for getting there, a booking card and a waterline footer.
This example uses generated pictures from this site: art.ts. Copy that file from the repository, or use your own images in its place.
"use client";
import { Ryokan } from "@/components/miyuki-ui/ryokan";
import { landscape } from "@/registry/lib/art";
const images = {
hero: landscape("kiritani-valley", { width: 1920, height: 1080, mood: "dusk" }),
rooms: [
landscape("shizuku-river-room", { width: 720, height: 900, mood: "snow" }),
landscape("shizuku-garden-room", { width: 720, height: 900, mood: "dawn" }),
landscape("shizuku-yukimi-room", { width: 720, height: 900, mood: "night" }),
],
bath: landscape("kawa-no-yu", { width: 1600, height: 640, mood: "night" }),
};
export default function RyokanDemo() {
return <Ryokan images={images} />;
}Install
npx shadcn@latest add @miyuki-ui/ryokanThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
Ryokan
Prop
Type
Resort status
A ski resort's live status page: the morning snow report, lifts whose status and queues flip as they change, runs by difficulty, webcams, a trail map and pass prices.
Studio Ledger
Money in and out of a small glass studio for one month at a time: balances, a cash-flow diagram, spending by category, the portfolio, a calendar of daily spending and every transaction.