Postage Stamp Signup

Hotel51: Postage Stamp Signup

A centered newsletter section where a perforated postage stamp, its inner frame and an olive branch draw themselves in above a serif heading, a short line and an email field with a signup button on one row.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://beste.dev/r/hotel51?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://beste.dev/r-base/hotel51?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hotel51.tsx plus the button22 sliding-marker pill used as the submit button, the text1 word stagger used for the heading and the shadcn/ui input primitive behind the email field.

Quick start

The installed file exports hotel51Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

import { Hotel51, hotel51Demo } from "@/components/beste/block/hotel51";

export default function Page() {
  return <Hotel51 {...hotel51Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Hotel51 } from "@/components/beste/block/hotel51";

export default function Page() {
  return (
    <Hotel51
      eyebrow="Letters from the island"
      heading="Four letters a year, written at the kitchen table"
      description="One recipe from the kitchen each time, and nothing else."
      stamp={{ place: "Paros" }}
      form={{
        action: "/api/newsletter",
        label: "Email address",
        placeholder: "Your email",
        submitLabel: "Send me the letters",
        note: "Leave whenever you like, with one click at the bottom of any letter.",
      }}
      labels={{ drawing: "Line drawing of a postage stamp with an olive branch" }}
    />
  );
}

Props

type Stamp = {
  place: string;
};

type SignupForm = {
  action: string;
  label: string;
  placeholder: string;
  submitLabel: string;
  note?: string;
};

type Labels = {
  drawing?: string;
};

Behavior notes

• The form submits with method="post" to form.action, sending a single required field named email (type email, so the browser validates the address before submitting).
• form.label is rendered as a visually hidden <label> tied to the input through a generated id; the visible hint is the placeholder.
• The field and button stack on phones and sit on one row from the small breakpoint.
• The stamp is tilted slightly. Its perforated edge draws first, then the inner frame and the branch stem, then the leaves, two primary-colored olives and the place name fade on.
• Without stamp the drawing renders with no place name; without form neither the form nor its note renders.
• With reduced motion the drawing and text render in their final state.