shadcn.io is not affiliated with official shadcn/ui
Savings Badge CTA Block for React
A card-in-card price call to action: a big monthly price over its struck list price, with a twelve-point starburst sticker in foreground tones reading the percent saved, then a Shine Button and an outline link.
Installation
Overview
Say what a discount is worth with a sticker, in this call to action for React with Base UI. The block sits on the page's spine: two side rails at the page column and one top rule with a + mark on each crossing, so it joins the blocks above and below it. Under the rule sits a card in a card: a raised panel inside a tinted shell with + marks on its corners, so it follows your theme, light or dark. A headline sits over a very large monthly price with the old price struck through beside it, and a twelve-point starburst in the theme's foreground tone is pinned to the price's corner, tilted like a sticker, reading the percent saved. A line says the price rises next month, then a Shine Button and an outline link follow. The percentage is worked out from the two prices, so the sticker can't disagree with them. It's built from Shine Button and Button with CSS only: the starburst is a clip-path. For plan promotions, product launches and any price that looks better next to the one it replaced.
FAQ
How is the percentage worked out?
LIST_PRICE and PRICE are the two numbers you type. The sticker's percentage is the saving over the list price in whole-number arithmetic, rounded down ($20 off $39 is 51%). Doing it by hand is how a sticker ends up reading 49: nothing here is typed twice.
How is the starburst drawn?
It is a square filled with bg-foreground and cut to a twelve-point star with a clip-path: polygon(), so it scales with the text and follows the theme. To change the number of points or how sharp they are, replace the polygon's coordinates in STICKER. The sticker tilts a few degrees one way and the other way in a right-to-left page.
Does the sticker cover the price?
No: the price keeps room beside it (pe-24 on a phone, pe-32 from sm), and the sticker sits in that room, so no digit is ever under it. The price and sticker are centred together.
What does a screen reader hear?
The price is read as "Was $39, now $19" and then "That is 51% off", per month, in order. The sticker itself is hidden from assistive technology so it isn't read twice. The old and new prices keep a left-to-right direction in a right-to-left page.
Related
- Pro
Ribbon Urgency CTA
Urgency and limitsA reverse split sale call to action: the discount at display size under a corner sash reading Limited time, a hairline divider, then an Ends in 3 days badge, the headline and a Shine Button. Urgency comes from type and structure, not a red fill.
- Pro
Price Savings CTA
Prices and offersA card-in-card bundle call to action: the three products as pills and two bars, what they cost bought separately at full width and a shorter bundle bar with the gap labelled You save, then a Shine Button.
- Pro
Progress Urgency CTA
Urgency and limitsA centred scarcity statement: a headline over a framed seat map of 200 dots, one per founding seat, with the claimed ones solid and the next open ones pulsing, then the price with its list price struck and a Shine Button.
- Pro
Metadata Tagline CTA
Prices and offersAn event call to action as a band: the name and pitch, the struck standard price beside the early-bird price and a Shine Button, over a closing masthead band of three facts.
- Pro
Annual Savings Pricing
Billing switchesThree plans that show what yearly billing saves: each plan's head holds two bars, twelve monthly payments against one yearly payment, with the saving printed in the gap, under a monthly and yearly switch.
- %Pro
Seasonal Sale Pricing
Discounts and offersA seasonal sale for a stock-photo library: an oversized '−41%' stamp in the header row under an 'Autumn sale' ribbon, over three plans in shared-hairline cells with struck prices and the sale price at display size.