Announcement bar

Free

A thin bar for product news that rotates messages and remembers dismissal.

Installs components/ui/announcement-bar.tsxDepends on lucide-reactMotion shared motion tokens

pnpm dlx shadcn@latest add https://caliperui.site/r/announcement-bar.json

Workflows are in preview.

When to use #

Use it for

Launches, maintenance windows and offers that apply across the whole product.
Messages with a countdown or one clear action.

Skip it when

The message is about one task; use an alert beside it.
Several urgent messages compete; show the most important one.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/announcement-bar.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above. It is built from AnnouncementBar and clearAnnouncementDismissal.

example.tsx

import { AnnouncementBar } from "@/components/ui/announcement-bar"

export function LaunchBar() {
  return (
    <div className="w-full">
      <AnnouncementBar
        id="docs-launch-bar"
        messages={[
          { id: "launch", message: "Workflows are in preview.", action: { label: "Look around", onClick: () => undefined } },
          { id: "tip", message: "Press ⌘K to search every component." },
        ]}
      />
    </div>
  );
}

API reference #