# Announcement bar

> A slim dismissible bar above the header that rotates launch messages.

Component · Pro · https://lodeui.com/components/announcement-bar

## When to use

- Launches, sales and maintenance windows above your header.

## When not to use

- Errors in the app: use an alert.

## Installation

```bash
npx shadcn@latest add @lode/announcement-bar
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="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.

## Related

- [Alert](https://lodeui.com/components/alert) — Inline alerts and page banners in four tones, with actions and dismiss.
- [Marquee](https://lodeui.com/components/marquee) — Endless, seamless scroller for logos and testimonials that glides to a stop on hover.
- [Hero section](https://lodeui.com/blocks/hero-section) — Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.