ComponentsBlocks
Hut Booking
A three-step booking card for a mountain hut: nights on a range calendar, guests and meals, then confirm, with an itemised summary that updates as you choose and a hut stamp on the booking.
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 { type Hut, HutBooking } from "@/components/miyuki-ui/hut-booking";
import { landscape } from "@/registry/lib/art";
const hut: Hut = {
name: "Shirouma ridge hut",
region: "Northern Alps",
altitude: 2730,
image: landscape("shirouma", { width: 480, height: 270, mood: "snow" }),
prices: { bunk: 9800, child: 6500, dinner: 2600, breakfast: 1400, lunch: 900 },
open: { start: "2027-02-01", end: "2027-02-28" },
booked: ["2027-02-06", "2027-02-07", "2027-02-20", "2027-02-21"],
};
export default function HutBookingDemo() {
return (
<div className="w-full max-w-3xl">
<HutBooking
hut={hut}
defaultValue={{ start: "2027-02-12", end: "2027-02-14", adults: 2, dinner: true, breakfast: true }}
/>
</div>
);
}Install
npx shadcn@latest add @miyuki-ui/hut-bookingThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
HutBooking
Prop
Type
Hero Snow Water
A hero section with snow falling through the sky and water below, where the headline's last line stands on the waterline above its wavering reflection.
Newsletter Postcard
A sign-up form on the back of a postcard: the email goes on the address lines, a postmark cancels the stamp and the card slides away as if posted.