Sticky conversion trio that stays out of the way until scrolled for: a bottom CTA bar with offer line and social proof, a compact corner button that expands on hover or focus, and a bottom bar that doubles as a reading-progress indicator.
Also available for React ->$pnpm dlx shadcn-vue@latest add https://uipkge.dev/r/vue/sticky-cta.json$npx shadcn-vue@latest add https://uipkge.dev/r/vue/sticky-cta.json$yarn dlx shadcn-vue@latest add https://uipkge.dev/r/vue/sticky-cta.json$bunx shadcn-vue@latest add https://uipkge.dev/r/vue/sticky-cta.jsonnpx shadcn-vue@latest add @uipkge/sticky-ctaInstalls to:app/components/blocks/sticky-cta/| Name | Type / Values | Default | Required |
|---|---|---|---|
thresholdScroll distance in pixels before the bar reveals. | number | 480 | optional |
storageKeysessionStorage key holding the dismissal, so it stays closed for the session. | string | 'uipkge:sticky-cta-dismissed' | optional |
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { Clock, X } from 'lucide-vue-next'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
const props = withDefaults(
defineProps<{
/** Scroll distance in pixels before the bar reveals. */
threshold?: number
/** sessionStorage key holding the dismissal, so it stays closed for the session. */
storageKey?: string
}>(),
{
threshold: 480,
storageKey: 'uipkge:sticky-cta-dismissed',
},
)
// Starts hidden so server and first client render agree — the scroll handler
// is the only thing that reveals it.
const visible = ref(false)
const dismissed = ref(false)
function onScroll() {
visible.value = !dismissed.value && window.scrollY > props.threshold
}
function dismiss() {
dismissed.value = true
visible.value = false
try {
window.sessionStorage.setItem(props.storageKey, '1')
} catch {
// Private browsing or blocked storage: dismissing still holds for this page view.
}
}
onMounted(() => {
try {
dismissed.value = window.sessionStorage.getItem(props.storageKey) === '1'
} catch {
dismissed.value = false
}
onScroll()
window.addEventListener('scroll', onScroll, { passive: true })
})
onBeforeUnmount(() => window.removeEventListener('scroll', onScroll))
</script>
<template>
<Transition
enter-active-class="transition duration-200 ease-out"
enter-from-class="translate-y-full opacity-0"
leave-active-class="transition duration-150 ease-in"
leave-to-class="translate-y-full opacity-0"
>
<div
v-show="visible"
data-slot="sticky-cta-bar"
class="fixed inset-x-0 bottom-0 z-50 px-4 pb-4"
role="region"
aria-label="Trial offer"
>
<div
class="border-border bg-card/95 mx-auto flex max-w-4xl flex-wrap items-center gap-x-5 gap-y-3 rounded-xl border p-3 pl-4 shadow-lg backdrop-blur"
>
<Badge variant="secondary" class="gap-1.5">
<Clock class="size-3" aria-hidden="true" />
Free for 14 days
</Badge>
<p class="min-w-0 grow text-sm">
<span class="font-medium">Start on the full plan.</span>
<span class="text-muted-foreground"> No card, no sales call, cancel from the dashboard.</span>
</p>
<div class="flex items-center gap-2">
<Button size="sm">Start free trial</Button>
<Button size="sm" variant="ghost" class="hidden sm:inline-flex">Talk to us</Button>
<Separator orientation="vertical" class="hidden h-6 sm:block" />
<Button size="icon" variant="ghost" aria-label="Dismiss this offer" @click="dismiss">
<X class="size-4" aria-hidden="true" />
</Button>
</div>
</div>
</div>
</Transition>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { MessageSquare } from 'lucide-vue-next'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
// Expands on focus as well as hover: a keyboard user should be able to read the
// label before deciding whether to activate it.
const expanded = ref(false)
</script>
<template>
<div data-slot="sticky-cta-corner-button" class="fixed right-5 bottom-5 z-50">
<Button
size="lg"
class="group h-12 gap-0 rounded-full pr-4 pl-4 shadow-lg"
@mouseenter="expanded = true"
@mouseleave="expanded = false"
@focus="expanded = true"
@blur="expanded = false"
>
<MessageSquare class="size-5 shrink-0" aria-hidden="true" />
<!-- Width, not display: a hidden label would not animate, and a label that
pops in shifts the button under the cursor mid-click. -->
<span
class="overflow-hidden whitespace-nowrap transition-colors duration-200"
:class="expanded ? 'ml-2 max-w-[10rem] opacity-100' : 'max-w-0 opacity-0'"
>
Ask an engineer
</span>
</Button>
<Badge
variant="secondary"
class="border-background pointer-events-none absolute -top-1 -right-1 size-5 justify-center rounded-full border-2 p-0 text-xs"
>
1
</Badge>
</div>
</template>
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { ArrowRight, X } from 'lucide-vue-next'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Progress } from '@/components/ui/progress'
import { Separator } from '@/components/ui/separator'
const props = withDefaults(defineProps<{ revealAt?: number }>(), { revealAt: 15 })
// Both start at rest so server and first client paint agree; the scroll handler
// is the only thing that reveals the bar or moves the progress.
const progress = ref(0)
const visible = ref(false)
const dismissed = ref(false)
function onScroll() {
const scrollable = document.documentElement.scrollHeight - window.innerHeight
const percent = scrollable > 0 ? Math.min(Math.round((window.scrollY / scrollable) * 100), 100) : 0
progress.value = percent
visible.value = !dismissed.value && percent >= props.revealAt
}
onMounted(() => {
onScroll()
window.addEventListener('scroll', onScroll, { passive: true })
window.addEventListener('resize', onScroll)
})
onBeforeUnmount(() => {
window.removeEventListener('scroll', onScroll)
window.removeEventListener('resize', onScroll)
})
</script>
<template>
<Transition
enter-active-class="transition duration-200 ease-out"
enter-from-class="translate-y-full opacity-0"
leave-active-class="transition duration-150 ease-in"
leave-to-class="translate-y-full opacity-0"
>
<div
v-show="visible"
data-slot="sticky-cta-reading-progress"
class="border-border bg-card/95 fixed inset-x-0 bottom-0 z-50 border-t backdrop-blur"
role="region"
aria-label="Reading progress and trial offer"
>
<Progress :model-value="progress" class="h-0.5 rounded-none" aria-label="Reading progress" />
<div class="mx-auto flex max-w-5xl flex-wrap items-center gap-x-5 gap-y-2 px-6 py-3">
<Badge variant="secondary" class="shrink-0 tabular-nums">{{ progress }}% read</Badge>
<p class="min-w-0 grow text-sm">
<span class="font-medium">Finished the technical detail?</span>
<span class="text-muted-foreground"> The trial runs on your real warehouse, read-only.</span>
</p>
<div class="flex shrink-0 items-center gap-2">
<Button size="sm">
Start free
<ArrowRight class="ml-1.5 size-3.5" aria-hidden="true" />
</Button>
<Separator orientation="vertical" class="hidden h-5 sm:block" />
<Button
size="icon"
variant="ghost"
class="size-7"
aria-label="Dismiss"
@click="((dismissed = true), (visible = false))"
>
<X class="size-3.5" aria-hidden="true" />
</Button>
</div>
</div>
</div>
</Transition>
</template>
Raw manifest:https://uipkge.dev/r/vue/sticky-cta.json
