Announcement BarProv1.0.0
One quiet line across the top of a page: messages take turns (paused on hover and focus, still under reduced motion), an optional countdown ticks to a date, and dismissing folds it away and remembers.
pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-announcement-barNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
Countdown
Several messages
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import { AnnouncementBar } from "@/components/ui/lumen/controls/announcement-bar";
export function SiteBanner() {
return (
<AnnouncementBar
storageKey="banner-v2-launch"
endsAt="2026-10-15T17:00:00Z"
messages={[
{ id: "v2", content: "Version 2 is here: faster reports and a new editor.", href: "/changelog", action: "See what's new" },
{ id: "webinar", content: "Live walkthrough on Thursday at 5pm UTC.", href: "/events", action: "Save a seat" },
]}
/>
);
}Props
messages–{ id, content, href?, action? }[]One or more; several take turns. href makes the action a link ("Learn more" by default).
interval6000numberMilliseconds each message shows.
endsAt / onEnd–string | number | Date / () => voidA countdown to this moment, and a call when it reaches zero.
dismissibletruebooleanA close button.
storageKey–stringRemembers a dismissal in localStorage. Use a new key for a new announcement.
open / defaultOpen / onOpenChange–boolean / boolean / (open: boolean) => voidControlled or uncontrolled visibility. A new storageKey is a new campaign: it shows again unless that key was dismissed.
Show all 7 propsShow fewer
labels–Partial<AnnouncementBarLabels>Every word (region, dismiss, previous, next, learnMore, position, remaining), for other languages.
Source
components/ui/lumen/controls/announcement-bar.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
