SubscriptionLanding
The three public pages of an email list, subscribe with explicit consent, confirm for double opt-in, and unsubscribe with an optional reason and a way back.
Code
<SubscriptionLanding mode="subscribe" brand="Nasaq" onSubscribe={async ({ email }) => subscribe(email)} /><SubscriptionLanding mode="confirm" email="[email protected]" onConfirm={confirm} /><SubscriptionLanding mode="unsubscribe" email="[email protected]" onUnsubscribe={unsubscribe} onResubscribe={resubscribe} />Marketing · beta
Live examples and controls: SubscriptionLanding in the lab.
Install
npx shadcn@latest add https://docs.nasaqui.com/r/subscription-landing.jsonThe pages a recipient lands on from a signup form or from an email link. One component, three modes.
When to use
- The public subscribe, confirm and unsubscribe addresses of a newsletter or broadcast list.
When not to use
- Account sign in: use an auth card.
- Managing consent inside the app: use
ContactIdentities.
Import
import { SubscriptionLanding } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"Quick start
<SubscriptionLanding mode="subscribe" brand="Nasaq" onSubscribe={async ({ email }) => subscribe(email)} />
<SubscriptionLanding mode="confirm" email="[email protected]" onConfirm={confirm} />
<SubscriptionLanding mode="unsubscribe" email="[email protected]" onUnsubscribe={unsubscribe} onResubscribe={resubscribe} />Anatomy
- Subscribe: optional name, email, an unticked consent box, then "Check your inbox".
- Confirm: a button (never automatic, so mail scanners do not subscribe anyone), then "You are subscribed".
- Unsubscribe: an optional reason, then "You are unsubscribed" with an undo.
API
| Prop | Type | Description |
|---|---|---|
mode | "subscribe", "confirm" or "unsubscribe" | Which page. |
brand | ReactNode | The sender's name as text. |
email | string | For confirm and unsubscribe. Shown masked. |
onSubscribe | ({ email, name? }) => Promise<...> | |
onConfirm | () => Promise<...> | |
onUnsubscribe | ({ reason?, note? }) => Promise<...> | |
onResubscribe | () => Promise<...> | Shows the undo. |
reasons | string[] | Reason keys. |
askName | boolean | Adds a name field. |
labels | Partial<SubscriptionLandingLabels> | Override any string. |
Pure helpers: isSubscriberEmail, maskSubscriberEmail, validateSubscription.
Examples
Pass your own reasons and matching labels.reasons to change the survey.
Accessibility
Errors are announced. Outcomes are role="status". The consent box has a real label.
RTL & i18n
English and Arabic ship. The email field is left-to-right.
Styling & tokens
Semantic tokens only.
Do / Don't
- Do require an unticked consent box.
- Don't confirm or unsubscribe on page load.
Related
Lab
https://docs.nasaqui.com/?path=/docs/components-marketing-subscription-landing--docs
SocialComposer
One post for several social networks. Each target gets its own limit, counter, preview, media check and optional own version, and a metrics table reports how the posts did.
TrendsFeed
A feed of trending news topics with state tabs, day groups, score and reasons, outlets and expandable articles, plus a sources catalogue in three tiers that falls back to the next tier when one has nothing working.