A thin announcement bar that rotates several messages vertically, with a progress hairline, a counter, pause on hover and focus, and a dismiss button.
Plan the week in a minute.
One calm place for tasks, notes and focus time.
npx shadcn@latest add https://hyperblur.dev/r/site-announcement-ticker.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/site-announcement-ticker.tsx.
import { SiteAnnouncementTicker } from "@/components/hyperblur/site-announcement-ticker"
<SiteAnnouncementTicker items={[{ tag: "New", text: "Version 2 is live", href: "/changelog" }, { text: "Join the webinar on Friday" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { text: string; href?: string; tag?: string }[] | three sample messages | Messages to rotate. An item with href renders as a link and tag adds a small label. |
| interval | number | 3200 | Milliseconds each message stays visible. |
| dismissible | boolean | true | Show the close button. |
| onDismiss | () => void | Called when the bar is dismissed. The bar collapses and removes itself. | |
| pauseOnHover | boolean | true | Pause the rotation while the pointer is over the bar or focus is inside it. |
| label | string | "Announcements" | Accessible name of the region. |
| accent | string | "#2f7bff" | Color of the tag and the progress hairline. |