Opens when the pointer leaves through the top of the window and reminds the visitor of their bag. The coupon stub tears off when pulled down or tapped, revealing a code that can be copied and a discounted total.
npx shadcn@latest add https://hyperblur.dev/r/popup-exit-intent.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/popup-exit-intent.tsx.
import { PopupExitIntent } from "@/components/hyperblur/popup-exit-intent"
<PopupExitIntent showTrigger={false} code="STAY15" onCheckout={() => router.push("/checkout")} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Leaving already?" | Heading. |
| description | string | Bag saved copy | Text under the heading. |
| code | string | "STAY15" | Coupon code revealed after the tear. |
| discount | string | "15% off" | Coupon label. A percentage or amount is also used to compute the new total. |
| items | { name; variant; price: number; tint }[] | Two items | Items shown from the bag. tint colors the thumbnail. |
| currency | string | "USD" | Currency for Intl.NumberFormat. |
| locale | string | "en-US" | Locale for Intl.NumberFormat. |
| threshold | number | 12 | Distance in px from the top edge that counts as an exit. |
| delay | number | 4000 | Milliseconds on the page before exit detection arms. |
| once | boolean | true | Open at most once per browser session. |
| storageKey | string | "hb-exit-intent" | sessionStorage key used by once. |
| onReveal | (code: string) => void | Called when the stub is torn off. | |
| onCheckout | () => void | Called by Return to checkout. | |
| 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 | "Preview exit offer" | 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 | "#e8573f" | Coupon and focus color. |
| className | string | Extra classes on the root. | |
| style | React.CSSProperties | Inline styles on the root. |