Floating Promo Pill React component
A small offer that floats near the bottom of the page and opens on hover or focus to show the details and a button, without covering the content.
About the Floating Promo Pill component
Floating Promo Pill keeps an offer in view without taking over the page. It sits small and quiet near the bottom, then opens when someone points at it to show the details and a button.
It works from the keyboard too, and it stays out of the way of whatever people came to read.
When to use it
Use it for a short-lived offer or a single nudge on long pages.
One floating element is enough. Don't stack it with chat buttons and cookie notices in the same corner.
Installation
Add the Floating Promo Pill component to your project with the shadcn CLI. It lands in components/floating-promo-pill.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/floating-promo-pillProps
<FloatingPromoPill /> accepts 9 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title Short line, always visible. | string | "20% off annual plans" |
| detail Extra line shown when it opens. | string | "Ends Sunday. No code needed." |
| action | { label: string; href?: string; onClick?: () => void } | null | { label: "See plans" } |
| position Where it floats. | "bottom-center" | "bottom-right" | "bottom-left" | "bottom-center" |
| contained Keep it inside the nearest positioned parent instead of the window. | boolean | false |
| delay Milliseconds before it arrives. | number | 600 |
| dismissible | boolean | true |
| onDismiss | () => void | — |
- theme"dark" | "light"Default: "dark"
- title
Short line, always visible.
stringDefault: "20% off annual plans" - detail
Extra line shown when it opens.
stringDefault: "Ends Sunday. No code needed." - action{ label: string; href?: string; onClick?: () => void } | nullDefault: { label: "See plans" }
- position
Where it floats.
"bottom-center" | "bottom-right" | "bottom-left"Default: "bottom-center" - contained
Keep it inside the nearest positioned parent instead of the window.
booleanDefault: false - delay
Milliseconds before it arrives.
numberDefault: 600 - dismissiblebooleanDefault: true
- onDismiss() => void
Floating Promo Pill FAQ
- Can I place it elsewhere?
- Yes, with position: bottom-center, bottom-right or bottom-left.
- How do I keep it inside a section?
- Pass contained and it positions itself against the nearest positioned parent.
- Does it open on phones?
- Yes. Tapping it opens it the same way focus does.
- How do I delay it?
- delay sets how long it waits to arrive, in milliseconds.
