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 Vue ->$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/sticky-cta.json$npx shadcn@latest add https://uipkge.dev/r/react/sticky-cta.json$yarn dlx shadcn@latest add https://uipkge.dev/r/react/sticky-cta.json$bunx shadcn@latest add https://uipkge.dev/r/react/sticky-cta.jsonnpx shadcn@latest add @uipkge-react/sticky-ctaInstalls to:components/blocks/sticky-cta/| Name | Type / Values | Default | Required |
|---|---|---|---|
thresholdScroll distance in pixels before the bar reveals. | number | — | optional |
storageKeysessionStorage key holding the dismissal, so it stays closed for the session. | string | — | optional |
'use client'
import { useEffect, useRef, useState } from 'react'
import { Clock, X } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
interface StickyCtaBarProps {
/** Scroll distance in pixels before the bar reveals. */
threshold?: number
/** sessionStorage key holding the dismissal, so it stays closed for the session. */
storageKey?: string
}
export function StickyCtaBar({ threshold = 480, storageKey = 'uipkge:sticky-cta-dismissed' }: StickyCtaBarProps) {
// Starts hidden so server and first client render agree — the scroll handler
// is the only thing that reveals it.
const [visible, setVisible] = useState(false)
const dismissed = useRef(false)
useEffect(() => {
try {
dismissed.current = window.sessionStorage.getItem(storageKey) === '1'
} catch {
dismissed.current = false
}
const onScroll = () => setVisible(!dismissed.current && window.scrollY > threshold)
onScroll()
window.addEventListener('scroll', onScroll, { passive: true })
return () => window.removeEventListener('scroll', onScroll)
}, [threshold, storageKey])
function dismiss() {
dismissed.current = true
setVisible(false)
try {
window.sessionStorage.setItem(storageKey, '1')
} catch {
// Private browsing or blocked storage: dismissing still holds for this page view.
}
}
return (
<div
data-slot="sticky-cta-bar"
className={`fixed inset-x-0 bottom-0 z-50 px-4 pb-4 transition duration-200 ${
visible ? 'translate-y-0 opacity-100' : 'pointer-events-none invisible translate-y-full opacity-0'
}`}
role="region"
aria-label="Trial offer"
aria-hidden={!visible}
>
<div className="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" className="gap-1.5">
<Clock className="size-3" aria-hidden="true" />
Free for 14 days
</Badge>
<p className="min-w-0 grow text-sm">
<span className="font-medium">Start on the full plan.</span>
<span className="text-muted-foreground"> No card, no sales call, cancel from the dashboard.</span>
</p>
<div className="flex items-center gap-2">
<Button size="sm">Start free trial</Button>
<Button size="sm" variant="ghost" className="hidden sm:inline-flex">
Talk to us
</Button>
<Separator orientation="vertical" className="hidden h-6 sm:block" />
<Button size="icon" variant="ghost" aria-label="Dismiss this offer" onClick={dismiss}>
<X className="size-4" aria-hidden="true" />
</Button>
</div>
</div>
</div>
)
}
'use client'
import { useState } from 'react'
import { MessageSquare } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
export function StickyCtaCornerButton() {
// 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, setExpanded] = useState(false)
return (
<div data-slot="sticky-cta-corner-button" className="fixed right-5 bottom-5 z-50">
<Button
size="lg"
className="group h-12 gap-0 rounded-full pr-4 pl-4 shadow-lg"
onMouseEnter={() => setExpanded(true)}
onMouseLeave={() => setExpanded(false)}
onFocus={() => setExpanded(true)}
onBlur={() => setExpanded(false)}
>
<MessageSquare className="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
className={`overflow-hidden whitespace-nowrap transition-colors duration-200 ${
expanded ? 'ml-2 max-w-[10rem] opacity-100' : 'max-w-0 opacity-0'
}`}
>
Ask an engineer
</span>
</Button>
<Badge
variant="secondary"
className="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>
)
}
'use client'
import { useEffect, useRef, useState } from 'react'
import { ArrowRight, X } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Progress } from '@/components/ui/progress'
import { Separator } from '@/components/ui/separator'
export function StickyCtaReadingProgress({ revealAt = 15 }: { revealAt?: number }) {
// 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, setProgress] = useState(0)
const [visible, setVisible] = useState(false)
const dismissed = useRef(false)
useEffect(() => {
const onScroll = () => {
const scrollable = document.documentElement.scrollHeight - window.innerHeight
const percent = scrollable > 0 ? Math.min(Math.round((window.scrollY / scrollable) * 100), 100) : 0
setProgress(percent)
setVisible(!dismissed.current && percent >= revealAt)
}
onScroll()
window.addEventListener('scroll', onScroll, { passive: true })
window.addEventListener('resize', onScroll)
return () => {
window.removeEventListener('scroll', onScroll)
window.removeEventListener('resize', onScroll)
}
}, [revealAt])
return (
<div
data-slot="sticky-cta-reading-progress"
className={`border-border bg-card/95 fixed inset-x-0 bottom-0 z-50 border-t backdrop-blur transition duration-200 ${
visible ? 'translate-y-0 opacity-100' : 'pointer-events-none invisible translate-y-full opacity-0'
}`}
role="region"
aria-label="Reading progress and trial offer"
aria-hidden={!visible}
>
<Progress value={progress} className="h-0.5 rounded-none" aria-label="Reading progress" />
<div className="mx-auto flex max-w-5xl flex-wrap items-center gap-x-5 gap-y-2 px-6 py-3">
<Badge variant="secondary" className="shrink-0 tabular-nums">
{progress}% read
</Badge>
<p className="min-w-0 grow text-sm">
<span className="font-medium">Finished the technical detail?</span>
<span className="text-muted-foreground"> The trial runs on your real warehouse, read-only.</span>
</p>
<div className="flex shrink-0 items-center gap-2">
<Button size="sm">
Start free
<ArrowRight className="ml-1.5 size-3.5" aria-hidden="true" />
</Button>
<Separator orientation="vertical" className="hidden h-5 sm:block" />
<Button
size="icon"
variant="ghost"
className="size-7"
aria-label="Dismiss"
onClick={() => {
dismissed.current = true
setVisible(false)
}}
>
<X className="size-3.5" aria-hidden="true" />
</Button>
</div>
</div>
</div>
)
}
Raw manifest:https://uipkge.dev/r/react/sticky-cta.json
