Banner Top Bar Dismissible

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/banner5.tsx instead.

Usage

The file also exports banner5Demo, 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 { Banner5, banner5Demo } from "@/components/blocks/banner/banner5";

export default function Page() {
  return <Banner5 {...banner5Demo} />;
}

Props

Behavior notes

• The dismiss button is real local state: clicking it unmounts the bar entirely and there is no way to bring it back without reloading the block, matching a real one-time announcement bar.
• The message sits in a 3-column grid (spacer / message / dismiss button) rather than a simple flex row, so the message stays visually centered on the bar regardless of the dismiss button's width.
• There is no icon by design: top bars read cleanest as dense text, not decoration; adding one risks pushing the archetype toward the icon-left alert strip instead.

Frequently asked questions