shadcn.io is not affiliated with official shadcn/ui
Ribbon Urgency CTA Block for React
A 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.
Installation
Overview
Put a time limit on a sale with this call to action for React with Base UI, without painting anything red. 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. The start side is a cell with the discount at display size ("40%") and a diagonal sash pinned to its top corner, cut by the cell's edge the way a shop ribbon is, reading "Limited time" in the theme's foreground tone. A hairline divider with a + mark where it meets the top rule separates it from the end side: a small outline badge saying how many days are left, the headline, a short paragraph, a Shine Button and an outline link for Tessel's plans. The copy comes first in the document and the numeral takes the start column from lg; on phones the numeral cell follows the copy under a rule, so the button is on the first screen. It's built from Badge, Button and Shine Button, with CSS transitions only. For seasonal sales, anniversary offers, plan promotions and any discount with an end.
FAQ
How does the sash work?
It is a band rotated 45 degrees inside a square at the numeral cell's top inline-start corner; the square hides what sticks out, so the band is cut diagonally across the corner. In a right-to-left page the corner moves to the other side and the band turns the other way, so it always crosses the corner it is pinned to. The sash and the numeral are decoration: they're hidden from screen readers, and the badge and the headline say the same thing in words. Change its text in SASH_BAND's span.
Why isn't the urgency red?
Colour in these blocks marks one action, and red is reserved for errors. Urgency here comes from structure and type: a number set at display size, a ribbon in the strongest tone of the theme, a badge that counts the days. It reads the same in every preset, light or dark.
How do I set the real end of the sale?
DAYS_LEFT is a typed number so the block never shows a date that has passed: it reads "Ends in 3 days" however long you leave it. That is a stand-in. Work the figure out from your sale's real end date (on the server, or in the browser after the page loads) and pass it in, or swap the badge for the live countdown in Dark Digit Countdown.
How do I change the discount?
Edit DISCOUNT at the top of the file: it feeds both the display numeral and the headline. The figure sits in an isolated run of text, so it keeps its order and its percent sign in a right-to-left page.
Related
- Pro
Savings Badge CTA
Prices and offersA 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.
- 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
Digit Countdown Banner
Urgency and limitsA slim early-pricing band between the page rails, in your theme: the offer at the start, then past a solid divider a live countdown to the end of this month in a small frame beside a Shine Button, with a hairline along the bottom edge that drains as the month runs out.
- 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
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.
- Pro
Countdown Offer Pricing
Discounts and offersA launch price on a clock: a live countdown in days, hours, minutes and seconds at display size beside the headline, over three plans for a music app, one of them discounted. A Segment Group shows one plan at a time on a phone.