shadcn.io is not affiliated with official shadcn/ui
Icon Banner CTA Block for Vue
A slim band split into cells between solid rails: an icon tile, a solid divider, a title with one line of detail, and a Shine Button link on the end.
Installation
Overview
A slim banner for Vue with Ark UI, split into cells between the page's solid rails. A muted icon tile sits in a cell of its own at the start, a solid divider (with a + mark where it meets the top rule) separates it from a short title with one line of detail, and a Shine Button, the only primary control, sits on the end side. On narrow screens the divider goes away and the button drops to a full-width row under a rule. It's built from Shine Button and Guides with Lucide icons and your theme's tokens, with nothing animated but the button's light, and it follows the theme. For documentation page footers, inline breaks in long content and dense product pages, where a full-size CTA band would take over.
FAQ
How do I change the icon and the copy?
Swap TerminalIcon for any Lucide icon, and edit the title and detail line in the markup. The tile is a muted square with a faint ring, so primary stays on the button; the icon is hidden from assistive technology because the title says the same thing in words.
Where does the button go?
Get API key is a link with href="#": point it at your key page.
The Shine Button takes asChild with the link inside, so it can be your router's link.
Why is the title an h2?
A banner is a section of its own, so its title is a level-two heading set at body size; it is not an h1. If you embed the banner inside an existing section, change it to the next level down.