Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CTA blocks

Pro

Version Banner CTA Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A release banner that fits the whole changelog on one line and opens it on request, for React with Base 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.

How does it fit on a phone?

The badge and headline wrap on their own lines and the two buttons drop to a second row. The change cells stack, the kind badges keep a fixed width so the lines align, and a long line wraps beside its badge, down to 320 px.

  • Pro

    Icon Banner CTA

    Slim bands

    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.

  • Pro

    Dismissible Action Banner CTA

    Slim bands

    A slim survey banner between the page rails with a Shine Button and a close cell behind a solid divider: the close button opens a two-choice popover, then collapses the banner and leaves an Undo that takes focus.

  • Pro

    Icon Action Banner CTA

    Slim bands

    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.

  • Pro

    Changelog Hero

    Updates and timelines

    A compact centred hero for a build platform that ships weekly, over three release cells with hairlines that overshoot their corners.

  • Pro

    Centered Version Switcher Hero

    Interactive demos

    A compact centred hero whose version tabs swap the headline, the subtitle and three what's-new cells for each major release of a rules engine.

  • Pro

    Dual Action CTA

    Slim bands

    A band call to action between solid rails with one split button: a Shine Button Get started link joined to a chevron that opens a menu of other routes, beside a headline and a sentence, in your theme.

All 100 cta blocks