Dice Roll Discount Popup React component
A gamified discount-capture widget where visitors roll two 3D dice for a reward tier, with a themed reveal modal and code copy, rendered inline or as a corner-launched popup with manual/delay/scroll triggers.
About the Dice Roll Discount Popup component
Dice Roll Discount Popup lets visitors roll two 3D dice for a reward. The dice tumble for a moment, land, and the total decides the prize: a higher total gives a better reward, and any double gives a special top prize. A modal shows the prize with its code and a copy button, and every prize won stays listed below.
theme loads one of five ready sets of prizes (ecommerce, campaign, restaurant, saas, event), each with five tiers by total and a reward for doubles. Each visitor gets freeRolls rolls (3 by default), and the rolls left and the prizes won are saved in localStorage. lightMode switches to a light card. It can sit inline or as a popup that opens from a button, either on click, after a delay or once on scroll.
When to use it
Use it for first-order discounts, newsletter sign-up rewards, sale campaigns, café promotions and event upsells, where a quick game makes the offer feel earned.
For a wheel where some spins can win nothing, use Spin to Win Wheel. For a scratch-off reveal, use Scratch Card Popup.
Installation
Add the Dice Roll Discount Popup component to your project with the shadcn CLI. It lands in components/dice-roll-discount-popup.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/dice-roll-discount-popupOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<DiceRollDiscountPopup /> accepts 11 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 |
|---|---|---|
| accentColor | string | "#ffffff" |
| theme | "ecommerce" | "campaign" | "restaurant" | "saas" | "event" | "ecommerce" |
| lightMode | boolean | false |
| asPopup | boolean | false |
| defaultOpen Only used when asPopup is true — starts the popup open instead of showing the launcher widget. | boolean | false |
| trigger | "manual" | "delay" | "scroll" | "manual" |
| delaySeconds | number | 4 |
| widgetPosition | "bottom-right" | "bottom-left" | "bottom-right" |
| widgetIcon | string | — |
| freeRolls | number | 3 |
| storageKey | string | "" |
- accentColorstringDefault: "#ffffff"
- theme"ecommerce" | "campaign" | "restaurant" | "saas" | "event"Default: "ecommerce"
- lightModebooleanDefault: false
- asPopupbooleanDefault: false
- defaultOpen
Only used when asPopup is true — starts the popup open instead of showing the launcher widget.
booleanDefault: false - trigger"manual" | "delay" | "scroll"Default: "manual"
- delaySecondsnumberDefault: 4
- widgetPosition"bottom-right" | "bottom-left"Default: "bottom-right"
- widgetIconstring
- freeRollsnumberDefault: 3
- storageKeystringDefault: ""
Kits
Sets of components designed to be used together on one site, Dice Roll Discount Popup included.
Collections
Use-case pages that compare Dice Roll Discount Popup with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Dice Roll Discount Popup FAQ
- Does every roll win something?
- Yes. Every total maps to a tier (2 to 4, 5 to 6, 7 to 8, 9 to 10 and 11 to 12), and doubles, which come up about one roll in six, give the doubles reward instead.
- How do I set my own prizes?
- Edit a theme in the THEMES object at the top of the file. Each tier has a max total, a label and a code, and doublesReward sets the prize for doubles.
- Can visitors get around the roll limit?
- Yes. The limit and the codes live in the browser, so clearing site data resets the rolls and the codes can be read in the JavaScript. Use codes you are fine to share, or check them on your server.
- How do I run a new campaign with fresh rolls?
- Change storageKey. The saved rolls and prizes are keyed by it, so a new key gives everyone their freeRolls again.
