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 React ->$pnpm dlx shadcn-vue@latest add https://uipkge.dev/r/vue/exit-intent.json$npx shadcn-vue@latest add https://uipkge.dev/r/vue/exit-intent.json$yarn dlx shadcn-vue@latest add https://uipkge.dev/r/vue/exit-intent.json$bunx shadcn-vue@latest add https://uipkge.dev/r/vue/exit-intent.jsonnpx shadcn-vue@latest add @uipkge/exit-intentInstalls to:app/components/blocks/exit-intent/| Name | Type / Values | Default | Required |
|---|---|---|---|
storageKey | string | 'uipkge:exit-newsletter-seen' | optional |
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { Check, Mail } from 'lucide-vue-next'
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'
const props = withDefaults(defineProps<{ storageKey?: string }>(), {
storageKey: 'uipkge:exit-newsletter-seen',
})
const open = ref(false)
const email = ref('')
const submitted = ref(false)
function 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(props.storageKey) === '1') return
window.sessionStorage.setItem(props.storageKey, '1')
} catch {
// Blocked storage: shows once more this page view, never in a loop.
}
open.value = true
document.removeEventListener('mouseout', onPointerOut)
}
function subscribe() {
if (!email.value.trim()) return
submitted.value = true
}
onMounted(() => document.addEventListener('mouseout', onPointerOut))
onBeforeUnmount(() => document.removeEventListener('mouseout', onPointerOut))
</script>
<template>
<div data-slot="exit-intent-newsletter">
<Dialog v-model:open="open">
<DialogContent class="sm:max-w-md">
<DialogHeader>
<Badge variant="secondary" class="w-fit gap-1.5">
<Mail class="size-3" aria-hidden="true" />
Monthly notes
</Badge>
<DialogTitle class="mt-3 text-xl leading-snug text-balance">
Not ready to trial? Take the writing instead
</DialogTitle>
<DialogDescription class="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 @submit.prevent="subscribe">
<div class="flex gap-2">
<Input
v-model="email"
type="email"
required
placeholder="[email protected]"
autocomplete="email"
aria-label="Email address"
/>
<Button type="submit" class="shrink-0">Subscribe</Button>
</div>
<p class="mt-2 min-h-5 text-xs" aria-live="polite">
<span v-if="submitted" class="text-success inline-flex items-center gap-1.5">
<Check class="size-3" aria-hidden="true" />
Check your inbox to confirm.
</span>
<span v-else class="text-muted-foreground">8,400 subscribers, mostly data and finance engineers.</span>
</p>
</form>
</DialogContent>
</Dialog>
</div>
</template>
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { ArrowRight, Clock } from 'lucide-vue-next'
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'
const props = withDefaults(defineProps<{ storageKey?: string }>(), {
storageKey: 'uipkge:exit-intent-seen',
})
const open = ref(false)
// Only the top edge counts. A pointer leaving left, right, or bottom is usually
// someone reaching for a scrollbar or another window, not leaving the page.
function onPointerOut(event: MouseEvent) {
if (event.relatedTarget || event.clientY > 4) return
show()
}
function show() {
try {
if (window.sessionStorage.getItem(props.storageKey) === '1') return
window.sessionStorage.setItem(props.storageKey, '1')
} catch {
// Blocked storage: it can show once more this page view, never in a loop.
}
open.value = true
document.removeEventListener('mouseout', onPointerOut)
}
onMounted(() => document.addEventListener('mouseout', onPointerOut))
onBeforeUnmount(() => document.removeEventListener('mouseout', onPointerOut))
</script>
<template>
<div data-slot="exit-intent-offer">
<Dialog v-model:open="open">
<DialogContent class="sm:max-w-md">
<DialogHeader>
<Badge variant="secondary" class="w-fit gap-1.5">
<Clock class="size-3" aria-hidden="true" />
Before you go
</Badge>
<DialogTitle class="mt-3 text-xl leading-snug text-balance"> Take 30 days instead of 14 </DialogTitle>
<DialogDescription class="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 class="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 class="sm:justify-start">
<Button>
Start the 30-day trial
<ArrowRight class="ml-2 size-4" aria-hidden="true" />
</Button>
<Button variant="ghost" @click="open = false">No thanks</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
</template>
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { Check } from 'lucide-vue-next'
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 props = withDefaults(defineProps<{ storageKey?: string }>(), {
storageKey: 'uipkge:exit-survey-seen',
})
const options = [
'Pricing was unclear',
'Missing an integration',
'Just browsing',
'Security questions',
'Something else',
]
const open = ref(false)
const choice = ref('')
const detail = ref('')
const sent = ref(false)
function onPointerOut(event: MouseEvent) {
if (event.relatedTarget || event.clientY > 4) return
try {
if (window.sessionStorage.getItem(props.storageKey) === '1') return
window.sessionStorage.setItem(props.storageKey, '1')
} catch {
// Blocked storage: shows once more this page view, never in a loop.
}
open.value = true
document.removeEventListener('mouseout', onPointerOut)
}
function submit() {
if (!choice.value) return
sent.value = true
// Close on its own rather than making someone dismiss a thank-you.
setTimeout(() => (open.value = false), 1400)
}
onMounted(() => document.addEventListener('mouseout', onPointerOut))
onBeforeUnmount(() => document.removeEventListener('mouseout', onPointerOut))
</script>
<template>
<div data-slot="exit-intent-survey">
<Dialog v-model:open="open">
<DialogContent class="sm:max-w-md">
<div v-if="!sent">
<DialogHeader>
<Badge variant="secondary" class="w-fit">One question</Badge>
<DialogTitle class="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
:model-value="choice"
type="single"
variant="outline"
size="sm"
class="mt-5 flex-wrap justify-start"
aria-label="Reason for leaving"
@update:model-value="(value) => (choice = typeof value === 'string' ? value : '')"
>
<ToggleGroupItem v-for="option in options" :key="option" :value="option">{{ option }}</ToggleGroupItem>
</ToggleGroup>
<Textarea
v-model="detail"
class="mt-3"
rows="3"
placeholder="Anything more (optional)"
label="Anything more (optional)"
/>
<div class="mt-4 flex items-center gap-2">
<Button :disabled="!choice" @click="submit">Send</Button>
<Button variant="ghost" @click="open = false">Skip</Button>
</div>
</div>
<div v-else class="py-6 text-center" aria-live="polite">
<span class="bg-success/10 mx-auto flex size-10 items-center justify-center rounded-full">
<Check class="text-success size-5" aria-hidden="true" />
</span>
<p class="mt-3 text-sm font-medium">Thanks — that is genuinely useful.</p>
</div>
</DialogContent>
</Dialog>
</div>
</template>
Raw manifest:https://uipkge.dev/r/vue/exit-intent.json
