Sticky top-of-page banner with optional link and dismiss for product announcements.
Install
npx bouncekit@latest add announcementbarImport
import { AnnouncementBar } from "@/components/marketing/announcement-bar"1. Copy the source file
Copy src/components/marketing/announcement-bar.tsx into your project at the same path.
2. Install dependencies
Check the component's imports and install any missing packages.
3. Import and use
import { AnnouncementBar } from "@/components/marketing/announcement-bar"Make sure you have cn() from @/lib/utils available in your project.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
message | string | yes | Announcement message text. |
href | string | — | Optional link URL. |
linkLabel | string | — | Link text. Default: "Learn more". |
dismissible | boolean | — | Show dismiss button. Default: true. |