Newsletter Callout
A newsletter signup callout with a consumer-owned form endpoint.
Installation
npx payload-components add newsletter-calloutFor a direct file-only install:
pnpm dlx shadcn@latest add https://www.payload-components.xyz/r/newsletter-callout.jsonWhat 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 / v4 (experimental)
- Next.js
- 15 / 16 with v316 (16.2.6 or newer) with v4
- shadcn UI
- none
Payload v4 support is experimental: it needs Next.js 16 (16.2.6 or newer) and Node.js 24.15 or newer. Payload v3 stays fully supported.
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.