Newsletter Callout

A newsletter signup callout with a consumer-owned form endpoint.

v0.1.0Post componentNewsletter familyEngagement

Installation

npx payload-components add newsletter-callout

For a direct file-only install:

pnpm dlx shadcn@latest add https://www.payload-components.xyz/r/newsletter-callout.json

What it installs

Copies 1 source file into your project:

  • src/components/NewsletterCallout/Component.tsx

This file-only article component adds no Pages registration, renderer mapping, or generated files. Compose it in your article template using the example below.

Re-running the CLI install detects existing source and wiring, then records install state in .payload-components/state.json.

Content model

The component renders a plain HTML form. Your application owns the endpoint, consent rules, submission response, and subscriber storage.

Prop

Type

Usage

import { NewsletterCallout } from '@/components/NewsletterCallout/Component'

export function ArticleNewsletter() {
  return (
    <NewsletterCallout
      title="Keep reading"
      description="Get new articles in your inbox."
      action="/api/newsletter"
      legalText="No spam. Unsubscribe anytime."
    />
  )
}

Requirements

Target
payload-website-starter, payload-blocks-app
Payload
v3
Next.js
15 / 16
shadcn UI
none

Direct shadcn installation needs React 19 and Tailwind with your theme tokens; this component has no Payload runtime imports. The targets above apply to CLI install tracking.

Your project must already expose components.json, src/payload.config.ts — the host shape checked by payload-components add. The CLI verifies this against the support matrix before touching anything.