Announcement bar

A top banner that rotates messages, counts down, and collapses smoothly when dismissed.

feedbacknew

Preview

Live · keyboard ready

Manicat Pro adds 43 motion components and the larger blocks.

When to use

Site-wide promotions, launches, or maintenance notices at the top of every page.
Rotating two to four short announcements in one slim bar.
A sale banner with a live countdown to its end.

When not to use

Use alert for a message tied to one section or form.
Use toast for feedback on something the visitor just did.
Use cookie-consent for consent choices.

shadcn CLI

Also installs (1)

manicat-foundation

Manual install(+)

registry.jsonjson

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "announcement-bar",
  "type": "registry:ui",
  "title": "Announcement bar",
  "description": "A top banner that rotates messages, counts down, and collapses smoothly when dismissed.",
  "categories": [
    "feedback"
  ],
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json"
  ],
  "files": [
    {
      "path": "registry/components/announcement-bar/announcement-bar.tsx",
      "type": "registry:component",
      "target": "@components/manicat/announcement-bar/announcement-bar.tsx"
    },
    {
      "path": "registry/components/announcement-bar/announcement-bar.module.css",
      "type": "registry:component",
      "target": "@components/manicat/announcement-bar/announcement-bar.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/announcement-bar",
  "meta": {
    "tier": "free",
    "kind": "component",
    "docs": "https://manicat.viraza.net/components/announcement-bar",
    "markdown": "https://uiarc.dev/components/announcement-bar/markdown",
    "tags": [
      "feedback",
      "new"
    ]
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx

"use client";

import { AnnouncementBar } from "@/components/manicat/announcement-bar/announcement-bar";

export function AnnouncementBarExample() {
  // Size containers have no width of their own: give the demo the whole row.
  return <div className="w-full"><AnnouncementBar
      messages={[
        { id: "pro", message: "Manicat Pro adds 43 motion components and the larger blocks.", action: { label: "See Pro", onClick: () => {} } },
        { id: "registry", message: "Every item installs with the shadcn CLI.", action: { label: "Installation", onClick: () => {} } },
      ]}
    /></div>;
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Product announcements A rotating banner at the top of the site with a call to action per message.

Live · keyboard ready

Manicat Pro adds 43 motion components.

product-announcements-a-rotating-banner-at-the-top-of-the-site-with-a-call-to-action-per-message-.tsxtsx

"use client";

import { AnnouncementBar } from "@/components/manicat/announcement-bar/announcement-bar";

export function AnnouncementBarProductExample() {
  return (
    <div className="w-full">
      <AnnouncementBar
        messages={[
          { id: "pro", message: "Manicat Pro adds 43 motion components.", action: { label: "See Pro", onClick: () => {} } },
          { id: "cli", message: "Every item installs with the shadcn CLI.", action: { label: "Installation", onClick: () => {} } },
        ]}
      />
    </div>
  );
}

Keyboard interactions

Keys	Action
Tab	Moves through the call to action and dismiss button, plus previous, pause, and next when controls is on. Focus inside pauses rotation.
Enter / Space	Presses the focused control.

Accessibility

The bar is a labelled section; with several messages it is a carousel and each message a slide labelled n of total.
The viewport is aria-live off while rotating and polite while paused, so auto-rotation is not read aloud.
With controls, the pause ring is a toggle button with aria-pressed and previous and next buttons control the slides region. Without controls, rotation still pauses on hover and focus.
Countdowns are role="timer" with aria-live off and a spoken label in hours and minutes.
Rotation pauses on hover, keyboard focus inside, or a hidden tab.

Motion

Next messages rise from below and leave upward (previous runs the other way) while the viewport springs to the new height.
With controls, the ring around the pause button fills linearly over the interval, stops where it is on pause, and finishes the rest on resume.
Countdown digits drop in from above; dismissing collapses the bar's height so the page below eases up.
Reduced motion turns rotation off, swaps messages and digits with fades, and removes the height collapse.

Responsive behavior

Wide bars mirror the controls with an empty column so the message stays centered on the page.
The bar is an inline-size container; at 560px and below messages align to the start edge instead of centering.
Messages wrap on small screens and the viewport springs to the wrapped height; icon buttons are 32px.

Performance

One linear motion value drives the ring; it stops while paused, hidden, or dismissed.
A countdown ticks with one timeout per second, waking just after each whole second.

Notes for AI

Place it above the site header. With an id, dismissal persists; call clearAnnouncementDismissal(id) or change the id to show it again.
Keep messages to one short sentence; the call to action is a link when href is set, a button otherwise.
For a standalone countdown elsewhere on the page use countdown; this bar has its own lighter timer.