shadcn.io is not affiliated with official shadcn/ui
Left Right Icon CTA with Facts Footer Block for React Aria
A card-in-card call to action: an icon tile, a short headline and a sentence at the start, the Shine Button at the end, and a tray along the shell's foot with three facts that each have an icon.
Installation
Overview
Close a docs page or a product section with a banner that stays small and still answers "will it work for me?", for a CI service called Ferry. A muted shell with + marks on its corners holds a raised panel that follows your theme: an icon tile beside a short headline and a line of copy at the start, the Shine Button "Add to repository" at the end. A tray along the foot of the shell lists three facts, each with its own icon: what it works with, how long it takes to set up and its licence. The facts are a real list, not words joined by pipe characters, so they wrap cleanly and read well aloud. It's built from Item (its icon tile), Guides and Shine Button, with your theme's tokens for every colour. For developer tools, open-source projects, integrations and any compact conversion band with a few supporting facts.
FAQ
How do I change the icon, the headline and the facts?
Swap the Lucide icon inside the tile, edit the heading and paragraph, and change FACTS at the top of the file: each fact has an icon and a line of text. Two to four facts fit; they sit in a row on wide screens and wrap onto more lines on narrow ones.
How do I point the button at my install or action flow?
It's a link: change the href on the anchor inside the Shine Button to your marketplace listing, install page or docs. Add query parameters there if you attribute where installs come from. Keep the label saying where it goes, "Add to repository" here, rather than a generic "Learn more".
The button renders a link when it has an href.
Which claims should I check before using it?
The three facts are samples. Replace them with ones that are true of your product, and keep them checkable: a list of supported languages, a setup step count you have timed and a licence you have published. This block deliberately has no adoption figures such as "used by 1,200 repositories", since those go stale and need a source.
How does a screen reader read it?
The headline is an h2, the icon tile is decoration and hidden, and the facts are a list whose icons are hidden too, so it reads "Works with Node, Python, Go and Rust" and the rest as three list items. All the text is in your theme's muted foreground at full strength, which keeps its contrast at AA in light and dark.