shadcn.io is not affiliated with official shadcn/ui
Ribbon Urgency CTA Block for Radix UI
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 Radix 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.