Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Expandable Code Banner Block for React

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 React with Base 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.

  • Pro

    Expandable Banner

    Disclosures and tabs

    A fee-change notice for a rent-collection tool as a card in card: one header line that opens a sentence, three rows of facts (Now, From next renewal, Why) and a link.

  • Pro

    Tabbed Carousel Banner

    Disclosures and tabs

    A tabbed announcement for a documentation platform: a card with three underline tabs (What's new, Tips, Updates) and a panel under them, driven by the visitor, with no autoplay.

  • Pro

    Collapsible Details Banner

    Disclosures and tabs

    An incident notice for a status-page product as a disclosure: one summary line with an Investigating badge, and open it explains the incident and lists the four affected services.

  • Pro

    Expandable Timeline Banner

    Disclosures and tabs

    A parcel notice for a tracking product as a disclosure: a header that names the current stage and its step, and a vertical four-step timeline when opened.

  • Pro

    Inset Code Snippet Copy CTA

    Code and commands

    A card-in-card call to action for a data SDK, split by a hairline: the headline, one sentence and a Shine Button at the start, and a three-line quickstart snippet with a copy button on every line and a Copy all button at the end.

  • Pro

    New Feature Top Bar Banner

    Top bars

    A top bar for a collaborative editor with an outline New chip, one line of news and a See it button that opens a popover preview of the feature, with a close at the end.

All 100 banner blocks