Newsletter Signup Section

CTAs 19

About

Newsletter signup section for a brand that is loud about its name: your wordmark fills the field edge to edge in heavy condensed capitals, cropped like a shop sign, with a hard-bordered card on top holding the email field, topic chips, consent and a sign-up button that answers when someone subscribes. Social proof line, presets, light and dark.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Newsletter Signup Section to your project and fits it to your theme.

Code

How Newsletter Signup Section is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import WordmarkNewsletterSignup from "@/components/ui/wordmark-newsletter-signup"

export default function WordmarkNewsletterSignupDemo() {
  return (
    <WordmarkNewsletterSignup
      brand="Big Sunday Sauce Co."
      successWord="See you Sunday"
      headline="One recipe every Sunday, straight to your inbox"
      description="Sauces, sides and the odd kitchen disaster. Free, weekly, and one click to leave."
      topics={["Recipes", "New sauces", "Pop-ups"]}
      defaultTopics={["Recipes"]}
      proof="Read by 18,240 home cooks"
      successAction={{ label: "Read last week's recipe", href: "#latest" }}
    />
  )
}