Banner Expandable Code

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/banner/banner26.tsx instead.

Usage

The file also exports banner26Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Banner26, banner26Demo } from "@/components/blocks/banner/banner26";

export default function Page() {
  return <Banner26 {...banner26Demo} />;
}

Props

Behavior notes

• The copy button calls navigator.clipboard.writeText and silently swallows any rejection, since clipboard access can be blocked by browser permissions and a hard error there isn't worth surfacing.
• After a successful copy, the button icon swaps from Copy to Check for 1.5 seconds via a plain setTimeout, then reverts automatically.
• The snippet panel uses the same dark zinc-950 chrome as other dark code blocks in this codebase, so it stays visually consistent even though it's nested inside a light-mode banner.
• The reveal itself reuses the same grid-rows height transition as the other expandable banners in this category, so the interaction feels consistent across the set.

Frequently asked questions