MarketingNewsletter

Newsletter signup band: heading + subcopy + a caller-supplied form (email Input + Button) and an optional disclaimer line. Centered single column (default) or copy-left + form-right on ≥lg. Presentational and theme-driven.

Installation

pnpm

pnpm dlx @hex-core/cli add marketing-newsletter

Usage

tsx

import { MarketingNewsletter } from "@/components/ui/marketing-newsletter"

Centered newsletter signup

Heading + form + disclaimer.

tsx

import { MarketingNewsletter, Input, Button } from "@hex-core/components";

<MarketingNewsletter
  title="Stay in the loop"
  description="One short email a month — what's new, no spam."
  form={
    <form className="flex gap-2">
      <Input type="email" placeholder="you@example.com" required />
      <Button type="submit">Subscribe</Button>
    </form>
  }
  disclaimer="We never share your email. Unsubscribe anytime."
/>

Variant values

layoutComposition.

Value	Description
`centered`default	Centered single column.
`split`	Copy left, form right on ≥lg.

API Reference

Prop	Type	Default	Description
`title`required	`ReactNode`	—	Section heading.
`form`required	`ReactNode`	—	The signup form — pass your own <form> with email Input + Button.
`description`	`ReactNode`	—	Supporting subcopy below the title.
`disclaimer`	`ReactNode`	—	Optional fine-print disclaimer below the form (privacy / unsubscribe note).
`layout`	`enum`	centered	'centered' for a hero-style band, 'split' for copy + form side-by-side on ≥lg.
`className`	`string`	—	Additional classes applied to the root <section>.

AI Guidance

When to use

Use to capture email subscriptions on landing / blog / about pages. 'centered' for end-of-page push; 'split' when paired with marketing copy.

When not to use

Don't use as the primary CTA (use marketing-cta). Don't use without a privacy disclaimer when collecting an email — most jurisdictions require notice.

Common mistakes

Passing a button with no `type='submit'` — Enter on the input won't submit the form.
Omitting `required` on the email Input — empty submissions reach the backend.
Putting the form's submit handler in the parent's onClick instead of <form onSubmit> — breaks keyboard Enter and screen-reader announcements.

Accessibility

The block is layout; the form's labels and accessible names depend on the form you pass. Use <Label htmlFor> or aria-label on the email Input. The disclaimer is plain text positioned after the form so screen readers reach it in source order.

Related components

Token budget: 949

Verified against @hex-core/components@1.14.0

Edit this page on GitHub