shadcn.io is not affiliated with official shadcn/ui
Boarding Pass Ticket Stub Features Block for React Aria
Three route cards for a migration tool, each shaped like a perforated ticket: a manual-to-automated route on the main panel and the time saved on a stub, with a notch at each end of the divider.
Installation
Overview
A ticket-style features section for React with React Aria. Three cards stack in a centred column, each a route from a manual way of working to an automated one: the main panel gives the route, "From manual releases to automated releases" with the time each takes, and a sentence; the stub gives the time saved. A solid divider joins them, with a half-circle notch cut from the card at each end of it, drawn with a CSS mask and outlined with a hairline arc, so it reads as a perforated ticket without dashes. The header adds the three savings up from the same list. Below md the stub sits under the main panel and the notches move to the card's sides. It's built from Badge and Guides, and it follows your theme. For migration tools, automation products and any before-and-after story told as a journey.
FAQ
How do I change the routes?
Edit ROUTES at the top of the file: each has the name and the minutes of the manual way and of the automated way, a sentence and what one run is called. The stub's time saved is the difference and the header's total is the sum, both worked out in the file, and minutes are written as "2 h 30 min".
How are the notches cut?
The card has a CSS mask made of two radial gradients, one per end of the divider, intersected so each takes out a 10 px circle centred on the card's edge. A half-circle outline, a hairline arc, is drawn over each cut. The stub's size is a CSS variable (--stub), its height on a phone and its width from md, so the cut always lands on the divider.
Does it work in every theme?
Yes. The card is bg-card with the border token, and the cut shows the page behind, so it works on light, dark and tinted pages and in every preset. There is no shadow, because a mask would clip it.
How does a screen reader read a ticket?
Each card is a list item with a heading, a route badge, the From and To lines with their times, the sentence and the stub's time saved, in that order. The notches and the arrows between From and To are decoration and are hidden.