shadcn.io is not affiliated with official shadcn/ui
Centered Light Ticket Perforated Edge CTA Block for Solid
A centred call to action drawn as a wide ticket with real notches and a perforated edge, framed by hairlines between the page rails: the Shine Button tears off the stub to reveal a copyable promo code.
Installation
Overview
A centred call to action shaped like a ticket, for Solid with Ark UI. Between the page rails, a frame of hairlines with + marks on its corners holds a wide ticket cut into a main part and a stub along a dashed, perforated edge, with a half-circle notch cut out of the ticket at each end of the tear line. The main part holds the headline ("Take 20% off your first year of Tallybook"), a sentence with a bold lead and one Shine Button, "Tear off your code". Press it and the stub slides off and tilts away, and the promo code it was covering appears in its place with a Copy button; press "Tape the stub back" to put it back. On a phone the stub goes under the offer. It's built from Shine Button, Copy Button and Guides, with CSS masks for the notches and CSS transitions for the tear, and your theme's tokens for every colour. For launch offers, welcome discounts and invitations that should feel like something you hold.
FAQ
How are the notches made?
They are real cut-outs, not circles painted in the page colour: each piece of the ticket has a CSS mask made of two radial gradients that makes a half circle at each end of the tear line fully transparent, so whatever is behind the ticket shows through, on a light page, a dark page or a photo. A hairline is drawn around each cut so the card's border follows it. The pieces sit side by side on wide screens and stack on narrow ones, and the notches move from the sides of the tear line to the top and bottom edges of the stack.
What happens when I tear off the stub?
The stub is a cover over the piece that holds the code. The Shine Button toggles it: the cover slides away and tilts for 0.7 seconds while fading out, and the code underneath, which was out of reach until then, becomes visible and focusable. A polite status line announces "Your code is WELCOME20." The button's label switches to "Tape the stub back", which puts the cover back.
What happens with reduced motion?
The stub doesn't slide or tilt: it only fades out in 0.3 seconds, and fades back in when taped on. The ticket's entrance is skipped too.
How do I use my own code, and how does Copy work?
Edit PERCENT at the top of the file: the code, "WELCOME20", is built from it and the headline and the stub show the same number. Copy puts the code on the clipboard, its icon turns into a check for three seconds and screen readers hear "Copied"; if the clipboard is refused, as on a page not served over HTTPS, they hear "Couldn't copy" and the code is still there to select. The code is only a stand-in: serve a real one from your server if each visitor should get their own.
Is it usable with a keyboard and a screen reader?
Yes. Everything is a real control: the tear button and the Copy button take Tab, Enter and Space. Until the stub is torn the code and its button are inert, so they can't be reached while covered; after, the stub is inert instead. The decorative notches and perforation are hidden from assistive technology.