shadcn.io is not affiliated with official shadcn/ui
Inset Count Badge CTA Block for Radix UI
A centred card-in-card hiring CTA whose Shine Button wears a pinned count of open roles, with three featured roles as links in one hairline-divided strip below it.
Installation
Overview
Put a number on your call to action with this hiring block for React with Radix UI. A muted shell with + marks on its corners wraps a raised panel that follows your theme: a large headline, a line of copy for a routing API's team, a Shine Button that wears a small count badge pinned to its corner, and three featured roles as links in one strip of cells divided by hairlines, with a single outer radius. The count isn't typed in: it's the sum of the open roles in the team list at the top of the file, so it can't drift from the data. The badge is a solid foreground chip, so the button stays the only primary control. It's built from Guides, Shine Button, Float, Badge and Item, with CSS transitions for the entrance and your theme's tokens for every colour. Made for careers pages, open-source contributor calls, beta waitlists and any prompt where "how many" is part of the pitch.
FAQ
Where does the number on the button come from?
It's OPEN_ROLES, computed from the TEAMS array at the top of the file, where each team has a name and a number of open roles. Change a team's number, add a team, or replace the array with data from your applicant system, and the badge and the copy ("across 4 teams") follow. The badge is a Float pinned to the button's top corner, inside a relative wrapper. The Shine Button doesn't change size on hover, so the badge never moves out from under its corner.
What do screen readers hear for the badge?
The button is a link named "View open roles", and the badge right after it reads "12 open roles": the digits and an sr-only unit, so the number is never spoken alone. The badge doesn't take clicks (pointer-events-none), so the whole target stays the button, and its figure sits in a bdi so it keeps its digits in right-to-left text.
How do I change the featured roles?
Edit the FEATURED array: each role has a title, a team and a place, and the whole cell is one link, so point its href at the posting. Three cells fill the strip from the sm breakpoint; below it they stack. Keep them to roles that are really open, since the cells link straight to a posting while the badge counts all of them.
Each cell is an Item with asChild around your link.
Does the badge stay on the end corner in right-to-left languages?
Yes. Float pins to the inline end, which is the opposite corner in a right-to-left layout, and the block adds the matching mirrored nudge so the badge straddles the corner there as it does in left-to-right. The arrows in the cells mirror too.
Does the panel follow my theme?
Yes. The panel has no dark scope: it is light on a light page and dark on a dark page, using bg-card with a shadow-lg and a ring-1 ring-foreground/15 hairline to stand out from its muted shell, whose corners carry + marks. To make it louder, strengthen the ring or the shadow.