Promo Banner
Promotional banners as a sticky top bar or a large card, with a calm countdown, a copyable code chip, dismiss, and a pausable rotating-messages variant.
Preview
Free shipping on orders over $60
Scroll this frame: the bar stays pinned to the top.
Autumn studio sale: 20% off everything in Home
Ends in02d06h30m
Flash sale on kettlesOur pour-over kettles at their lowest price this year.
Ends in05h00mSee kettles
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| message / interval | ReactNode | ReactNode[] / number | — / 5 | One message, or several that rotate every interval seconds (pausable). |
| code | string | — | Promo code as a copyable chip. |
| endsAt | Date | number | string | — | Countdown; seconds only show in the last hour. |
| now | Date | number | string | — | Time to count from on first paint (deterministic); ticks advance from it. |
| cta | { label; href?; onClick? } | — | Link or button after the message. |
| onDismiss | () => void | — | Shows the dismiss button; called after the banner collapses. |
| variant / tone / sticky | "bar" | "card" / "ink" | "accent" / boolean | "bar" / "ink" / false | Slim bar or large card, colour, and pinning to the top. |
| label | string | "Promotion" | Accessible name of the region. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.