A newsletter popup where the letter slides into an envelope, the flap folds shut and a seal stamps down once the address is accepted. Topic toggles, inline validation with a shake and an async submit are built in.
npx shadcn@latest add https://hyperblur.dev/r/popup-newsletter-envelope.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/popup-newsletter-envelope.tsx.
import { PopupNewsletterEnvelope } from "@/components/hyperblur/popup-newsletter-envelope"
<PopupNewsletterEnvelope onSubscribe={(email, topics) => subscribe(email, topics)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "The Friday Changelog" | Heading of the form state. |
| description | string | Weekly digest copy | Text under the heading. |
| topics | string[] | ["Product updates", "Engineering notes", "Case studies"] | Toggleable topics. Pass an empty array to hide them. |
| defaultTopics | string[] | ["Product updates", "Engineering notes"] | Topics selected at first. |
| footnote | string | "No spam. Unsubscribe with one click." | Small print under the form. |
| onSubscribe | (email: string, topics: string[]) => void | Promise<void> | Called with a valid address. Return a promise to keep the loading state until it settles; a rejection shows an error. | |
| open | boolean | Controlled open state. | |
| defaultOpen | boolean | false (true when embedded) | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called on the close button, Escape, the backdrop and the main actions. | |
| showTrigger | boolean | true | Render the built-in trigger button. Turn it off when you open the popup from your own code. |
| triggerLabel | string | "Get the newsletter" | Text of the built-in trigger button. |
| embedded | boolean | false | Render the panel in place instead of a fixed overlay: no backdrop, no scroll lock and no focus trap, for previews and docs. |
| accent | string | "#ff7a45" | Seal, button and focus color. |
| className | string | Extra classes on the root. | |
| style | React.CSSProperties | Inline styles on the root. |