shadcn.io is not affiliated with official shadcn/ui
Icon Action Banner CTA Block for Vue
A slim documentation band between solid rails: a framed icon tile, a title that is one big link over the whole row, and a Shine Button to the quickstart.
Installation
Overview
A slim band where the whole row is a target, for Vue with Ark UI. A framed icon tile (its corners marked with + crossings), a bold title with one line of detail and a Shine Button share one row between the page's solid rails. The title is the one link, and Link Overlay stretches it across the entire row, so a click anywhere lands on the docs; the row tints on hover and rings on keyboard focus. The Shine Button, the band's only primary control, goes to the quickstart and stays clickable above the overlay. It's built from Link Overlay, Shine Button and Guides with Lucide icons and your theme's tokens, and it follows the theme. For docs entries and resource links where a small button would be an easy miss.
FAQ
How does the whole row become a link?
The title is wrapped in Link Overlay, inside a Link Box. The overlay's ::before covers the Link Box's whole area, so there is one link in the markup, named by its title, and the pointer treats the entire row as that link. Any other link you add inside the row stays clickable above it.
How can a button sit inside a link row?
It is not inside the link: the Link Box lifts every other link above the overlay, so the Shine Button is its own link to a different place (the quickstart) and stays clickable, while a click anywhere else on the row goes to the title's link. Give the two different destinations: two links to the same page would repeat themselves to a screen reader.
What does keyboard focus look like?
Tab goes to the title link, which takes a ring and tints the whole row, so the focus is as large as the click target, then to the Shine Button.