Website OS

Blocks

email x centered

A centered email-capture band — heading, one line of copy, an inline email field + button, and a terms note.

newsletteremailcapture

Get new blocks in your inbox.

One short email when something ships. No noise.

By signing up you agree to our terms.

Code

relume-newsletter.tsx

export function Newsletter() {
  return (
    <section className="mx-auto max-w-2xl px-6 py-16 md:py-24">
      <div className="flex flex-col items-center gap-4 rounded-3xl border border-border bg-card p-12 text-center">
        <h2 className="text-4xl font-bold tracking-tight">Get new blocks in your inbox.</h2>
        <p className="text-muted-foreground">One short email when something ships. No noise.</p>
        <form className="mt-2 flex w-full max-w-md gap-3">
          <input
            type="email"
            placeholder="Enter your email"
            className="w-full rounded-full border border-border bg-transparent px-4 py-3"
          />
          <button className="shrink-0 rounded-full bg-foreground px-6 text-background">Sign up</button>
        </form>
        <p className="text-xs text-muted-foreground">By signing up you agree to our terms.</p>
      </div>
    </section>
  );
}

Adapted from the Relume Library — swap the placeholder copy and it themes itself from your project tokens.

Use it in another build

Drop this section into a page, keep your project tokens, and it themes itself. Or tell Claude Code: “add the Newsletter section and fill it with my copy.”