Banner Alert Success

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

Usage

The file also exports banner16Demo, 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 { Banner16, banner16Demo } from "@/components/blocks/banner/banner16";

export default function Page() {
  return <Banner16 {...banner16Demo} />;
}

Props

Behavior notes

• The progress bar starts at full width and is collapsed to 0% on the next animation frame after mount, so a CSS width transition timed to durationMs animates it down to empty; the auto-dismiss timeout fires on the same duration.
• A manual close button is also available, which clears the pending timeout so the card doesn't try to dismiss an already-unmounted element.
• The icon is looked up internally rather than accepted as a prop, since this is a Client Component and a Lucide icon reference can't cross the Server-to-Client props boundary from a generated demo page.

Frequently asked questions