shadcn.io is not affiliated with official shadcn/ui
Left Right CTA with Eyebrow Pill Block for Radix UI
A card-in-card call to action that follows your theme: a headline with a quiet outline pill that links to a customer story, one sentence, and the Shine Button with an outline action at the end.
Installation
Overview
An enterprise call to action for React with Radix UI, for a team workspace called Keel. A muted shell with + marks on its corners holds a raised panel that follows your theme. The headline sits at the start with a quiet outline pill beside it: a status dot, "Read Tidewater's story" and an arrow, in sentence case, linking to a customer story. One sentence follows, then the Shine Button "Contact sales" and an outline "See plans" at the end. It's built from Announcement, Status, Guides, Shine Button and Button with your theme's tokens, so the panel is light on a light page and dark on a dark one. Use it on a pricing page's last section or as a contact-sales band, where a story is the best reason to get in touch.
FAQ
How do I change the pill?
Edit the pill's text and its href. The text is the whole link, one line that ends in an ellipsis on a narrow screen, so write it as words that make sense on their own, such as "Read Tidewater's story". The dot and the arrow are decoration, hidden from screen readers; the arrow flips in a right-to-left layout. There is no uppercase eyebrow: the pill is quiet and sits with the headline, not above it.
Where do the links go?
The pill and both buttons are links (href="#"): point the pill at the story, See plans at your pricing and Contact sales at your sales form.
Each button takes asChild with the link inside, so it can be your router's link.
What is the Shine Button?
The one primary control in the block. A band of light sweeps across it once when the pointer arrives, it takes keyboard focus or it's pressed; with reduced motion the light fades in where it stands. The outline button beside it is the quieter second choice.