A slim banner that rotates through messages with a vertical slide, pauses on hover and can be dismissed.
npx shadcn@latest add https://hyperblur.dev/r/announcement-bar.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/announcement-bar.tsx.
import { AnnouncementBar } from "@/components/hyperblur/announcement-bar"
<AnnouncementBar variant="gradient" messages={[{ text: "Version 2.0 is live.", cta: "Read more", href: "/blog" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| messages | { text: string; badge?: string; cta?: string; href?: string }[] | Messages to show. With more than one, they rotate. `cta` renders an arrow link pointing at `href`. | |
| variant | "solid" | "gradient" | "subtle" | "solid" | Visual style. Solid and gradient use the accent color, subtle sits on a dark surface. |
| interval | number | 4500 | Milliseconds each message stays on screen. Set 0 to stop rotating. Rotation is also off when the user prefers reduced motion. |
| dismissible | boolean | true | Shows the dismiss button. Dismissal lives in component state only. |
| onDismiss | () => void | Called when the user dismisses the bar. Use it to persist the choice yourself. | |
| accent | string | "#2f7bff" | Base color of the solid and gradient variants and of the subtle variant highlights. |