Announcement Bar
A full-width site banner with light, dark, and gray theme variants, plus an Embla carousel slider.
This is an announcement bar.
We’re donating $10 to the National Park Foundation for each purchase made at Apple using Apple Pay through August 28.*
Save on Mac and iPad for college with education pricing.
Shop the latest Apple Watch bands and accessories.
Installation
npx shadcn@latest add https://reactdocs.canceydejean.dev/r/announcement-bar.jsonUsage
Use the announcement bar for sitewide notices above the header. Set theme to light, dark, or
gray.
import AnnouncementBar from "@/components/ui/announcement-bar/announcement-bar";
<AnnouncementBar theme="gray" className="text-center">
<p>Free shipping on orders over $50.</p>
</AnnouncementBar>For rotating announcements, use AnnouncementBarSlider. Pass each message as a child; prev/next
chevrons and keyboard arrows navigate between slides.
import { AnnouncementBarSlider } from "@/components/ui/announcement-bar/announcement-bar";
<AnnouncementBarSlider theme="gray">
<p>We’re donating $10 to the National Park Foundation for each purchase…</p>
<p>Save on Mac and iPad for college with education pricing.</p>
<p>Shop the latest Apple Watch bands and accessories.</p>
</AnnouncementBarSlider>