Announcement bar

A top banner that rotates messages, counts down, and collapses smoothly when dismissed.

$npx shadcn@latest add @silicon-ui/announcement-bar

feedbacknew

Installation

$npx shadcn@latest add @silicon-ui/announcement-bar

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/announcement-bar/announcement-bar.tsx
- components/silicon-ui/announcement-bar/announcement-bar.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

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

Prop	Type	Default
`messages*`	`Announcement[]`	—
`id` Remembers dismissal under this id. Change the id to show a new campaign to everyone again.	`string`	—
`open` Whether the bar is shown. Leave it out to let the component manage it.	`boolean`	—
`defaultOpen`	`boolean`	`true`
`onOpenChange`	`(open: boolean) => void`	—
`index` Index of the visible message.	`number`	—
`defaultIndex`	`number`	`0`
`onIndexChange`	`(index: number) => void`	—
`interval` Milliseconds each message stays before the next one. Defaults to 6000.	`number`	`6000`
`autoPlay` Rotate automatically. Pauses on hover, focus, or a hidden tab, and is turned off when the visitor prefers reduced motion. Defaults to true.	`boolean`	`true`
`controls` Show previous, next, and pause controls when there are several messages. Defaults to false: only the close button shows.	`boolean`	`false`
`dismissible`	`boolean`	`true`
`tone`	`"neutral" \| "inverted"`	`"neutral"`
`onAction`	`(announcement: Announcement) => void`	—
`onCountdownEnd`	`(announcement: Announcement) => void`	—
`label` Accessible name of the region.	`string`	`"Announcements"`
`className`	`string`	—

Also accepts the props of HTMLAttributes.