Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification blocks

Pro

Discount Offer Notification Block for Ark UI

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 Ark 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.

All 100 notification blocks