shadcn.io is not affiliated with official shadcn/ui
Savings Badge CTA Block for React Aria
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 React Aria. 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.