shadcn.io is not affiliated with official shadcn/ui
Version Banner CTA Block for Vue
A slim release band between solid rails: a version badge, the headline change, a Shine Button to the notes and a disclosure that opens a second band of three change cells.
Installation
Overview
A release banner that fits the whole changelog on one line and opens it on request, for Vue with Ark UI. A monospace version badge and the headline change sit on the start side of a band between the page's solid rails, and a Shine Button to the release notes and a "3 changes" disclosure on the end side. The disclosure opens a second band under the row, its rule and + marks fading in, with one cell per change on shared hairlines: a kind badge, New, Faster or Fixed, and a line of text. The list eases open with a CSS height transition so nothing above it moves. It's built from Collapsible, Badge, Button, Shine Button and Guides, and it follows the theme. For product updates, docs headers and release pages.
FAQ
How do I change the version and the list of changes?
Edit VERSION and CHANGES at the top of the file. Each change is a kind and a line of text, and the button's count is the length of the list, so it never drifts. Keep the headline in the markup to the one change that matters most.
How does the disclosure behave?
The "3 changes" button is a real disclosure: it reports expanded or collapsed to screen readers, opens with Enter or Space, and its chevron turns over. Its name includes the version, so a page with several banners stays unambiguous. The list opens below the row as a second band with a cell per change, so the version and the headline never move.
What about reduced motion?
The list eases open, its rule fades in and the chevron turns over with CSS only; with reduced motion turned on the list opens at once and nothing animates.