Newsletter Signup

Newsletter signup. Pro · Landing pages and brand › Conversion and footer

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add newsletter-signup

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { NewsletterSignup } from 'valyro-ui-pro';

Prop	Type	Default
`title`	`ReactNode`		Heading beside or above the form; also the form's accessible name.
`description`	`ReactNode`		Supporting text under the title.
`onSubscribe` *	`(email: string) => Promise<void>`		Called with a validated, trimmed address. Reject to show the error's message.
`variant`	`'inline' \| 'card'`	`'inline'`	`inline`: text beside a one-line form. `card`: stacked inside a panel.
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	Level of the title (h1–h6).
`placeholder`	`string`	`'[email protected]'`	Placeholder of the email field.
`emailLabel`	`string`	`'Email address'`	Accessible label of the email field (visually hidden).
`buttonLabel`	`ReactNode`	`'Subscribe'`	Text of the submit button.
`successMessage`	`ReactNode`	`'Thanks! Check your inbox to confirm.'`	Announced under the form after `onSubscribe` resolves; the field is cleared.
`invalidMessage`	`ReactNode`	`'Enter a valid email address.'`	Shown when the address fails client-side validation.
`errorMessage`	`ReactNode`	`'Something went wrong. Please try again.'`	Shown when `onSubscribe` rejects without an error message.
`privacyNote`	`ReactNode`	`'No spam. Unsubscribe at any time.'`	Small print under the form; `null` hides it.

CTA Section — Call-to-action block
App Store Buttons — App store buttons: App Store, Google Play, Galaxy Store, RuStore
Footer — Site footer
Hero Section — Landing page hero
Feature Grid — Feature grid
Bento Grid — Responsive bento grid of cards in mixed sizes
Logo Cloud — Customer logos
Pricing Table — Pricing plans
Comparison Table — Product comparison
Testimonials — Customer testimonials
FAQ Section — Frequently asked questions
Award Badge — Award badge with a laurel wreath, stars and caption