ComponentsBlocks
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.
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 { NewsletterPostcard } from "@/components/miyuki-ui/newsletter-postcard";
import { landscape } from "@/registry/lib/art";
export default function NewsletterPostcardDemo() {
return (
<NewsletterPostcard
title="One letter a week from the mountains."
signature="Aiko Tanaka, Shirouma hut"
submitLabel="Post it"
stamp={landscape("postcard-stamp-shirouma", { mood: "dawn", width: 144, height: 176 })}
stampAlt="Shirouma at dawn"
postmark="Hakuba"
imprint="Printed on snow paper in Otaru"
onSubmit={() => new Promise((resolve) => setTimeout(resolve, 700))}
>
<p>
Every Friday, a short letter from the hut: what fell overnight, which ridges are holding, and one route worth
the early start. No more than five minutes to read.
</p>
</NewsletterPostcard>
);
}Install
npx shadcn@latest add @miyuki-ui/newsletter-postcardThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
NewsletterPostcard
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.
Route Card
A route at a glance: the line drawn over a contour map, its figures, a compact elevation profile that moves a dot along the map, and save and GPX actions.