Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Expandable Code Banner Block for Vue

An install notice for a CLI toolkit as a disclosure: a header with a version badge opens package-manager tabs and the command in a mono box with a Copy button.

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

An install banner for Vue with Ark UI, for a tool whose first step is a command. A card sits between the page's solid rails with one header line: a terminal icon, "Install the CLI", a version badge and a chevron, and the whole line is the trigger of a disclosure that starts closed. Opened, it shows a row of package-manager tabs (npm, pnpm, yarn, bun) and, under the chosen one, the command in a mono box with a Copy button at its end. The box follows your theme; it is not a dark window. The height opens on one grid row with a CSS transition. It's built from Collapsible, Tabs, Copy Button, Badge and Guides.

FAQ

How do I change the commands?

Edit MANAGERS at the top of the file: each entry is an id, the tab's label and the command. The tabs, the boxes and the Copy buttons are all drawn from the list, so a fifth manager is one more entry. Each command is one line: a long one scrolls inside its box, which takes keyboard focus so it can be read with the arrow keys.

What does the Copy button do?

It writes the shown command to the clipboard and swaps its icon for a check for three seconds. A polite status inside the button says "Copied", or "Couldn't copy" if the browser refuses (a page not served over HTTPS has no clipboard). Each button is named for its manager ("Copy the yarn command"), and only the shown command can be copied.

How is the disclosure named for screen readers?

The trigger is a button inside the block's heading (h2), named by "Install the CLI" and the version; it reports expanded or collapsed and opens with Enter or Space. Inside, the tabs are a real tab list: arrow keys move between them and the chosen tab's panel follows.

How do I start it open, or on another manager?

Give Collapsible the defaultOpen prop, and the tabs a different defaultValue.

Why does it name Node 22?

A requirement such as a runtime version is data about compatibility, not a brand logo, so it is written as plain text. Replace it with your own requirement, or delete the line.

How does it fit on a phone?

The tabs stay in one row and the command scrolls sideways inside its box when it is longer than the width, with the Copy button fixed at its end. Nothing else scrolls at 320 pixels. The command and its $ prompt stay in reading order in a right-to-left layout.

All 100 banner blocks