Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification blocks

Pro

Discount Offer Notification Block for React

A plant shop's 30% off coupon drawn as a notched ticket, with a code you can copy to the clipboard, an end date, folding terms and a claim button that says it only applied the code in this demo.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Make an offer feel like something you hold with this discount notice for React with Base UI. It is Terrafold, an online plant shop, with no frame at all: the ticket is the frame. It is a card with a half-circle notch cut into both edges where the offer meets the stub, cut by a CSS mask so the page shows through. The top says "30% off" for annual plans with a Badge; the stub holds the code ANNUAL30 in mono with a Copy Button that writes to the real clipboard, and the day the offer ends. A Collapsible folds the terms open under the ticket. Claim offer is the one Shine Button. For promo banners, win-back emails and any coupon shown in the app.

FAQ

How do I use my own offer?

Edit CODE, ENDS (a date in UTC), TERMS and the offer text in the top of the ticket. If the top part needs a different height, change TOP: the notch sits on its lower edge and the mask follows.

How is the notch made?

Two stacked layers, each masked by a pair of radial gradients at the two edges: the outer layer is the one pixel outline, and the inner layer is the card, cut slightly wider so a ring of outline stays round each notch. It is CSS only, so it works on any background, in light and dark, and mirrors in right-to-left.

Does the copy button really copy?

Yes, it writes ANNUAL30 to the system clipboard and a status line says "Copied ANNUAL30." If the clipboard is blocked (a page that is not served over HTTPS) the button shows a cross instead.

What does Claim offer do, and how do I wire it for real?

It only says "Applied ANNUAL30 in this demo. Nothing was bought." and changes nothing. In your app apply the code to the cart or account from claim, and show the server's answer (an expired or already used code) in the same status line.

How does it look on a phone?

The ticket is at most 24 rem wide and shrinks to fit 320 pixels. The terms fold open under it, and the claim button is full width with its status line below.

  • Pro

    Referral Rewards Pricing

    Discounts and offers

    Referral pricing as a copyable invite link over a three-step reward track: friends invited and joined (2 of 3), the free months each step pays (1 month, 3 months, a year) and what's already earned.

  • Pro

    Referral Reward Notification

    A fitness app's referral ladder: a progress bar with ticks at 1, 3 and 5 friends, the credit earned as a rolling figure, three rungs marked Reached or Next, and an invite link and message you can copy.

  • Pro

    Announcement Notification

    Floating cards

    A what's new card for a product analytics app: three updates in a carousel with Previous, Next and the place in words, a Don't show this again box, and a Dismiss that folds the card.

  • Pro

    Achievement Notification

    A medal shelf for a learning platform after a learner finishes a first project: eight drawn medals in a hairline grid with a New badge on the latest, and a popover on each medal with its criteria, a progress bar and the day it was earned.

  • Pro

    Project Activity Feed Notification

    A project's history as a vertical timeline split in two: six event types as chips with live counts in a start column, and the timeline of who did what beside them, filtered by the types you press, with Load earlier events and a designed empty state.

  • Pro

    Alert Banner Notification

    Incidents and alerts

    An operations console's banner bar over a sketch of its app: four notices queue by urgency and show one at a time, with Previous, Next, a link, Dismiss and Snooze all for an hour.

All 100 notification blocks