A promotional popup with a gradient artwork side, a delayed entrance and a don't-show-again checkbox. It closes with Escape or a click on the backdrop, and renders inside its own relative frame.
npx shadcn@latest add https://hyperblur.dev/r/site-promo-modal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/site-promo-modal.tsx.
import { SitePromoModal } from "@/components/hyperblur/site-promo-modal"
<div style={{ position: "relative", height: 360 }}><SitePromoModal delay={800} storageKey="promo-welcome" /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | Controlled open state. Pair with onOpenChange. | |
| defaultOpen | boolean | true | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called when the modal is dismissed. | |
| delay | number | 0 | Milliseconds to wait before the modal appears once it is open. |
| badge | string | "Welcome offer" | Small label above the title. Empty hides it. |
| title | string | "20% off your first order" | Headline. |
| description | string | "Free shipping over $40, too." | Supporting line under the headline. |
| cta | string | "Claim my code" | Label of the main button. |
| ctaHref | string | "#" | Link target of the main button. |
| onCta | () => void | Called when the main button is clicked. | |
| rememberLabel | string | "Don't show this again" | Label of the checkbox. |
| storageKey | string | localStorage key. When set, checking the box and dismissing stores it and the modal stays hidden on later visits. | |
| onDismiss | (dontShowAgain: boolean) => void | Called on dismiss with the state of the checkbox. | |
| highlight | string | "20%" | Big figure on the built-in artwork. |
| art | ReactNode | Replaces the built-in artwork. | |
| autoFocus | boolean | true | Move focus into the dialog when it appears. |
| fixed | boolean | false | Cover the whole viewport instead of the parent frame. |
| accent | string | "#2f7bff" | Color of the artwork gradient, checkbox and focus rings. |
| children | ReactNode | Page content rendered behind the modal inside the frame. |