Exit-intent dialog trio that fires once per session when the pointer leaves toward the browser chrome: an extended-trial offer, a monthly-notes newsletter capture, and a one-question exit survey.
Also available for Vue ->$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/exit-intent.json$npx shadcn@latest add https://uipkge.dev/r/react/exit-intent.json$yarn dlx shadcn@latest add https://uipkge.dev/r/react/exit-intent.json$bunx shadcn@latest add https://uipkge.dev/r/react/exit-intent.jsonnpx shadcn@latest add @uipkge-react/exit-intentInstalls to:components/blocks/exit-intent/'use client'
import { useEffect, useState, type FormEvent } from 'react'
import { Check, Mail } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Separator } from '@/components/ui/separator'
export function ExitIntentNewsletter({ storageKey = 'uipkge:exit-newsletter-seen' }: { storageKey?: string }) {
const [open, setOpen] = useState(false)
const [email, setEmail] = useState('')
const [submitted, setSubmitted] = useState(false)
useEffect(() => {
const onPointerOut = (event: MouseEvent) => {
// Top edge only: leaving sideways is usually the scrollbar or another window.
if (event.relatedTarget || event.clientY > 4) return
try {
if (window.sessionStorage.getItem(storageKey) === '1') return
window.sessionStorage.setItem(storageKey, '1')
} catch {
// Blocked storage: shows once more this page view, never in a loop.
}
setOpen(true)
document.removeEventListener('mouseout', onPointerOut)
}
document.addEventListener('mouseout', onPointerOut)
return () => document.removeEventListener('mouseout', onPointerOut)
}, [storageKey])
function subscribe(event: FormEvent) {
event.preventDefault()
if (!email.trim()) return
setSubmitted(true)
}
return (
<div data-slot="exit-intent-newsletter">
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<Badge variant="secondary" className="w-fit gap-1.5">
<Mail className="size-3" aria-hidden="true" />
Monthly notes
</Badge>
<DialogTitle className="mt-3 text-xl leading-snug text-balance">
Not ready to trial? Take the writing instead
</DialogTitle>
<DialogDescription className="leading-relaxed">
Last issue: “Why we version metric definitions instead of dashboards.” One email a month, no product
announcements, unsubscribe in one click.
</DialogDescription>
</DialogHeader>
<Separator />
<form onSubmit={subscribe}>
<div className="flex gap-2">
<Input
value={email}
onChange={(event) => setEmail(event.target.value)}
type="email"
required
placeholder="[email protected]"
autoComplete="email"
aria-label="Email address"
/>
<Button type="submit" className="shrink-0">
Subscribe
</Button>
</div>
<p className="mt-2 min-h-5 text-xs" aria-live="polite">
{submitted ? (
<span className="text-success inline-flex items-center gap-1.5">
<Check className="size-3" aria-hidden="true" />
Check your inbox to confirm.
</span>
) : (
<span className="text-muted-foreground">8,400 subscribers, mostly data and finance engineers.</span>
)}
</p>
</form>
</DialogContent>
</Dialog>
</div>
)
}
'use client'
import { useCallback, useEffect, useState } from 'react'
import { ArrowRight, Clock } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog'
import { Separator } from '@/components/ui/separator'
export function ExitIntentOffer({ storageKey = 'uipkge:exit-intent-seen' }: { storageKey?: string }) {
const [open, setOpen] = useState(false)
const show = useCallback(() => {
try {
if (window.sessionStorage.getItem(storageKey) === '1') return false
window.sessionStorage.setItem(storageKey, '1')
} catch {
// Blocked storage: it can show once more this page view, never in a loop.
}
setOpen(true)
return true
}, [storageKey])
useEffect(() => {
// Only the top edge counts. A pointer leaving left, right, or bottom is
// usually someone reaching for a scrollbar or another window.
const onPointerOut = (event: MouseEvent) => {
if (event.relatedTarget || event.clientY > 4) return
if (show()) document.removeEventListener('mouseout', onPointerOut)
}
document.addEventListener('mouseout', onPointerOut)
return () => document.removeEventListener('mouseout', onPointerOut)
}, [show])
return (
<div data-slot="exit-intent-offer">
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<Badge variant="secondary" className="w-fit gap-1.5">
<Clock className="size-3" aria-hidden="true" />
Before you go
</Badge>
<DialogTitle className="mt-3 text-xl leading-snug text-balance">Take 30 days instead of 14</DialogTitle>
<DialogDescription className="leading-relaxed">
A full close cycle fits in 30 days and 14 does not, which is the actual reason most trials stall. No card,
no call, cancel from the dashboard.
</DialogDescription>
</DialogHeader>
<Separator />
<ul className="text-muted-foreground space-y-1.5 text-sm">
<li>· Everything on the Business plan</li>
<li>· Connect your real warehouse, read-only</li>
<li>· Keep the definitions you author either way</li>
</ul>
<DialogFooter className="sm:justify-start">
<Button>
Start the 30-day trial
<ArrowRight className="ml-2 size-4" aria-hidden="true" />
</Button>
<Button variant="ghost" onClick={() => setOpen(false)}>
No thanks
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
)
}
'use client'
import { useEffect, useState } from 'react'
import { Check } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Textarea } from '@/components/ui/textarea'
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
const options = [
'Pricing was unclear',
'Missing an integration',
'Just browsing',
'Security questions',
'Something else',
]
export function ExitIntentSurvey({ storageKey = 'uipkge:exit-survey-seen' }: { storageKey?: string }) {
const [open, setOpen] = useState(false)
const [choice, setChoice] = useState('')
const [detail, setDetail] = useState('')
const [sent, setSent] = useState(false)
useEffect(() => {
const onPointerOut = (event: MouseEvent) => {
if (event.relatedTarget || event.clientY > 4) return
try {
if (window.sessionStorage.getItem(storageKey) === '1') return
window.sessionStorage.setItem(storageKey, '1')
} catch {
// Blocked storage: shows once more this page view, never in a loop.
}
setOpen(true)
document.removeEventListener('mouseout', onPointerOut)
}
document.addEventListener('mouseout', onPointerOut)
return () => document.removeEventListener('mouseout', onPointerOut)
}, [storageKey])
function submit() {
if (!choice) return
setSent(true)
// Close on its own rather than making someone dismiss a thank-you.
setTimeout(() => setOpen(false), 1400)
}
return (
<div data-slot="exit-intent-survey">
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="sm:max-w-md">
{!sent ? (
<div>
<DialogHeader>
<Badge variant="secondary" className="w-fit">
One question
</Badge>
<DialogTitle className="mt-3 text-xl leading-snug text-balance">What were you looking for?</DialogTitle>
<DialogDescription>
It goes to the people who build the page. No follow-up email unless you ask for one.
</DialogDescription>
</DialogHeader>
<ToggleGroup
value={choice}
type="single"
variant="outline"
size="sm"
className="mt-5 flex-wrap justify-start"
aria-label="Reason for leaving"
onValueChange={(value: string) => setChoice(value ?? '')}
>
{options.map((option) => (
<ToggleGroupItem key={option} value={option}>
{option}
</ToggleGroupItem>
))}
</ToggleGroup>
<Textarea
value={detail}
onValueChange={setDetail}
className="mt-3"
rows={3}
placeholder="Anything more (optional)"
label="Anything more (optional)"
/>
<div className="mt-4 flex items-center gap-2">
<Button disabled={!choice} onClick={submit}>
Send
</Button>
<Button variant="ghost" onClick={() => setOpen(false)}>
Skip
</Button>
</div>
</div>
) : (
<div className="py-6 text-center" aria-live="polite">
<span className="bg-success/10 mx-auto flex size-10 items-center justify-center rounded-full">
<Check className="text-success size-5" aria-hidden="true" />
</span>
<p className="mt-3 text-sm font-medium">Thanks — that is genuinely useful.</p>
</div>
)}
</DialogContent>
</Dialog>
</div>
)
}
Raw manifest:https://uipkge.dev/r/react/exit-intent.json
