Banner Pill Toast

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

Usage

The file also exports banner6Demo, 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 { Banner6, banner6Demo } from "@/components/blocks/banner/banner6";

export default function Page() {
  return <Banner6 {...banner6Demo} />;
}

Props

Behavior notes

• Dismiss is real local state: clicking the X unmounts the pill and there is no way to bring it back without reloading the block.
• Undo is an inline link (undoHref), not a click handler, since a client boundary that needs an imperative callback from a server-rendered demo page can't cross that boundary; wire it to a real route or intercept the navigation yourself.
• The icon is fixed to a success check by design in this variant; swap the Lucide import in the component source for other semantic states (error, warning, info).

Frequently asked questions