Announcement barPro
A slim dismissible bar above the header that rotates launch messages.
Message 1 of 2
When to use
- Launches, sales and maintenance windows above your header.
When not to use
- Errors in the app: use an alert.
Installation
Usage
Import it from @/components/ui/announcement-bar after installing.
example.tsx
import { AnnouncementBar } from "@/components/ui/announcement-bar";
<AnnouncementBar storageKey="launch-2026" messages={[{ text: "40 new components.", href: "/changelog", cta: "See what's new" }]} />API reference
AnnouncementBar
A dismissible strip that rotates its messages.
| Prop | Type | Default | Description |
|---|---|---|---|
| messages | { text; href?; cta? }[] | – | One or more messages. |
| badge | string | "New" | Label before the text. |
| storageKey | string | – | Remember dismissal in localStorage. |
| interval | number | 4500 | ms per message. |
| tone | "brand" | "neutral" | "dark" | "dark" | Colors. |
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Reach the link and dismiss button |
Accessibility
- A labelled region; rotation pauses on hover and focus.
- The dismiss button is labelled.
Motion
- Messages slide up through the bar; dismissing collapses its height.
Responsive behavior
- Text wraps and centers on phones.
Performance
- One interval while there are several messages.
Notes for AI
- Change storageKey for each new announcement so it shows again.
This page as Markdown, for assistants and coding agents:
/components/announcement-bar/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt