A limited-time offer inside a rotating light border, with rolling digit reels for the countdown, a striped claimed-seats bar and a CTA with a sheen. It switches to an ended state when the timer reaches zero.
npx shadcn@latest add https://hyperblur.dev/r/popup-promo-countdown.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/popup-promo-countdown.tsx.
import { PopupPromoCountdown } from "@/components/hyperblur/popup-promo-countdown"
<PopupPromoCountdown endsAt="2026-11-30T23:59:00-08:00" onClaim={() => applyCoupon("BF40")} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Black Friday" | Label at the top. |
| title | string | "Pro, annual plan" | What the discount applies to. |
| description | string | Offer details | Text under the title. |
| discount | number | 40 | Percentage shown large and in the CTA. |
| duration | number | 8049 | Seconds left, counted from mount. Ignored when endsAt is set. |
| endsAt | string | ISO date the offer ends, for a countdown shared by every visitor. | |
| claimed | number | 812 | Seats already claimed. |
| total | number | 1000 | Total seats. |
| ctaLabel | string | "Claim {discount}% off" | Button text. |
| onClaim | () => void | Called by the CTA. | |
| onExpire | () => void | Called once when the countdown reaches zero. | |
| open | boolean | Controlled open state. | |
| defaultOpen | boolean | false (true when embedded) | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called on the close button, Escape, the backdrop and the main actions. | |
| showTrigger | boolean | true | Render the built-in trigger button. Turn it off when you open the popup from your own code. |
| triggerLabel | string | "See the deal" | Text of the built-in trigger button. |
| embedded | boolean | false | Render the panel in place instead of a fixed overlay: no backdrop, no scroll lock and no focus trap, for previews and docs. |
| accent | string | "#ffcc33" | Border light, badge and CTA color. |
| className | string | Extra classes on the root. | |
| style | React.CSSProperties | Inline styles on the root. |