Back to components
ComponentAlertFree

Sales Ticket Popup React component

A corner-anchored promo popup shaped like a torn event ticket, with 5 themes, a zigzag badge stub, immediate/delay/scroll triggers, auto-hide, and dismiss-memory.

About the Sales Ticket Popup component

Sales Ticket Popup is a free promotional card styled like a torn event ticket: a large kicker, a badge stub with zigzag edges showing the offer, a short description and a full-width button, animating into a corner of the screen. It can appear immediately, after a delay or once the visitor scrolls far enough, hide itself after a while and remember that it was closed.

The content props are emoji, kicker, badgeText, description (wrap words in **double asterisks** to bold them), and buttonLabel with buttonHref or onButtonClick. The look is set by theme (dark, light, gradient, neon, outline), accent, radius, texture and maxWidth. corner, offsetX and offsetY place it. trigger with delaySeconds or scrollPercent decides when it shows, and animationStyle is slide, scale or bounce. autoHide, dismissible, rememberDismiss and dismissKey handle closing. fixed={false} renders it inline instead of pinned to the viewport.

When to use it

Use it for a site-wide sale, a launch discount, a free-shipping threshold or an early-bird event offer that should stay visible without blocking the page.

To hand out a code through a game, use Dice Discount Popup or Scratch Card Popup. For a full-width strip, use Announcement Banner.

Installation

Add the Sales Ticket Popup component to your project with the shadcn CLI. It lands in components/sales-ticket-popup.tsx as plain React + Tailwind CSS source you own and can edit.

Install
Copied!
npx shadcn@latest add @reactframe/sales-ticket-popup

Or copy the source by hand and install its dependencies:

Install
Copied!
npm install motion clsx tailwind-merge

Related components

Dice Discount Popup
Free
Scratch Card Popup
Free
Exit-intent Popup
Free
SEO-ready
Blog Article Cards
SEO-ready
Related Posts
Post Navigation