shadcn.io is not affiliated with official shadcn/ui
Two-Tone Split Banner Block for React
A seasonal offer on a split: a tinted half with 40% off in display type, and a plain half with the struck list price, the worked-out sale price per seat and a Shine Button.
Installation
Overview
An offer banner for React with Base UI. Between the page's rails, a split on a solid divider that meets the top rule, in two tones that come from structure: the start half is a faint tint with "This month only" and "40% off the Team plan" in display type, the end half is the plain page with the list price struck through, the sale price beside it per seat per year, one sentence on who it applies to and a Shine Button. The sale price is worked out from the list price and the percentage in the file, so the numbers can't drift apart. There is no end date to go stale. It's built from Badge, Shine Button and Guides, with your theme's tokens for every colour. For seasonal discounts, plan promotions and any offer whose price should be visible.
FAQ
How is the sale price worked out?
OFFER holds the list price (480) and the percentage off (40); SALE_PRICE is the list price times the share that remains, 480 times 60%, which is 288. Change either number and the sale price follows. The percentage in the heading comes from the same object. The fixed-price line says per seat per year, so state your own billing unit.
How do screen readers hear the prices?
The struck price is a del and the two prices are read in order with short visually hidden words: "Was $480, now $288 per seat per year". Both prices are one dir="ltr" run each, so they keep their order in a right-to-left layout.
Why is there no black half?
The two tones are a tint and the plain page, so the block follows your theme in light and dark. A forced black half would break other themes and compete with the page's own hero; the display type and the tint carry the emphasis.
How do I link the button to checkout?
Claim the offer is a link (href="#"): point it at your checkout with the offer applied. It's the block's only filled control.
It renders the link it's given with render, with nativeButton={false}.
Related
- Pro
Dual Actions Split Banner
Split calloutsA two-way fork for a component library: a tinted half with a short heading, and two ruled rows on a divider, each a whole-row link with a line about where it leads and an arrow.
- 021434Pro
Flash Sale Countdown Banner
CountdownsA flash-sale countdown for a lighting shop: the product with its struck regular price and sale price, a clock of hours, minutes and seconds in three cells, a Shine Button to claim the price, and a thin meter of how much stock is claimed.
- Pro
Trial Upgrade Multi-Action Banner
Choices and promptsA trial prompt card for a video editor that sets what you have now beside what stays after the trial, in two columns, with upgrade, compare and remind-me-later actions.
- Pro
Centered Stacked Banner
Stacked cardsA centred bonus offer for a music-learning app: a gift tile, a Limited time badge, a heading, a strip of fifteen month cells with the last three outlined as free, and a Shine Button.
- Pro
Compact Left Right CTA
Prices and offersA slim renewal band between solid rails with a Shine Button and an outline link on the end side, and a closing band of three cells that sets the two prices and the saving side by side.
- Pro
Pricing With Guarantee
Proof and guaranteesA free trial with a refund window drawn as a timeline: today, day 12, day 14 and day 30 on one line, beside the yearly plan, its price and call to action. It turns vertical on a phone.