Announcement Banner

banner x sticky

Top-of-page announcement banner with link. From Animata.

bannerannouncementribbonanimata

🎉 New feature: Dark mode is here!

Code

alert-banner.tsx

"use client";
import { useState } from "react";

export function AnnouncementBanner({ label = "New feature:", body = "Dark mode is here!" }) {
  const [show, setShow] = useState(true);
  if (!show) return null;
  return (
    <div className="flex w-full items-center justify-center gap-2 rounded-lg bg-brand/10 px-4 py-2.5 text-sm">
      <span className="text-brand">🎉 {label}</span>
      <span className="text-muted-foreground">{body}</span>
      <button onClick={() => setShow(false)} aria-label="Dismiss"
        className="ml-2 text-muted-foreground transition-colors hover:text-foreground">×</button>
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Announcement Banner component and wire it to my accent.”