React Sticky CTA Bar
Long product pages bury their call to action at the very bottom, which is exactly where a reader who is still deciding never reaches. This keeps it one click away from any scroll position — without stealing space from the hero.
Scroll the panel below — the bar appears once you pass 25%.
KLV-7000 secure accelerator
A post-quantum cryptographic accelerator built for fleets that cannot be taken offline. Hardware key storage, attestation, and line-rate AES-GCM in a single 484-ball package.
Paragraph 2 — long product pages bury their call to action at the very bottom, which is exactly where a reader who is still deciding never reaches. The sticky bar keeps it one click away from any scroll position.
Paragraph 3 — long product pages bury their call to action at the very bottom, which is exactly where a reader who is still deciding never reaches. The sticky bar keeps it one click away from any scroll position.
Paragraph 4 — long product pages bury their call to action at the very bottom, which is exactly where a reader who is still deciding never reaches. The sticky bar keeps it one click away from any scroll position.
Paragraph 5 — long product pages bury their call to action at the very bottom, which is exactly where a reader who is still deciding never reaches. The sticky bar keeps it one click away from any scroll position.
Paragraph 6 — long product pages bury their call to action at the very bottom, which is exactly where a reader who is still deciding never reaches. The sticky bar keeps it one click away from any scroll position.
Paragraph 7 — long product pages bury their call to action at the very bottom, which is exactly where a reader who is still deciding never reaches. The sticky bar keeps it one click away from any scroll position.
Paragraph 8 — long product pages bury their call to action at the very bottom, which is exactly where a reader who is still deciding never reaches. The sticky bar keeps it one click away from any scroll position.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| message | string | Primary line |
| detail | string | Secondary line |
| cta | { label, href } | Primary action |
| secondary | { label, href } | Lower-commitment action, hidden on small screens |
| showAfter | number | Scroll progress 0 to 1 before it appears (default 0.25) |
| position | "top" or "bottom" | Edge to pin to |
| dismissible | boolean | Show the close button (default true) |
| scrollRef | RefObject | Scroll container to observe; defaults to the window |
| — | — | Pin inside the nearest positioned ancestor |
Appear on commitment, not on arrival
showAfter is scroll progress, not a pixel offset — 0.25 means a quarter of the way down whatever the page's actual length is, so the same setting behaves sensibly on a short page and a long one. Showing the bar immediately wastes it: a reader who has not scrolled has not decided anything, and a bar that was there from the first paint becomes furniture they stop seeing.
dismissible is on by default and the dismissal is permanent for the session. A CTA that cannot be closed is a CTA that covers content on a small screen with no recourse.
Two integration notes: pass scrollRef when your page scrolls inside a container rather than the window, and use contained to pin the bar inside a positioned ancestor instead of the viewport — that is how the demo above stays inside its own panel. The bar uses the deep surface with the electric accent CTA, which is legal there and gives it enough contrast to read as a distinct layer over any page.
Do not pair it with an Exit-Intent Panel on the same page.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.