Top-of-page banner with default / primary / muted tones, optional dismiss button and localStorage persistence.
import {
AnnouncementBar,
AnnouncementBarBadge,
AnnouncementBarLink,
} from "@/components/ui/announcement-bar";
export default function AnnouncementBarDemo() {
return (
<div className="flex w-full flex-col gap-3 bg-background p-6 text-foreground">
<AnnouncementBar tone="default" dismissible className="rounded-lg border">
<AnnouncementBarBadge>New</AnnouncementBarBadge>
<span>v1.4 ships with a new combobox primitive.</span>
<AnnouncementBarLink href="#">Read the post</AnnouncementBarLink>
</AnnouncementBar>
<AnnouncementBar tone="primary" dismissible className="rounded-lg">
<span>Early-access pricing ends Friday.</span>
<AnnouncementBarLink href="#">Claim 50% off</AnnouncementBarLink>
</AnnouncementBar>
<AnnouncementBar tone="muted" className="rounded-lg border">
<span>
Scheduled maintenance on May 26, 02:00 UTC · ~15 min downtime.
</span>
</AnnouncementBar>
</div>
);
}
Part of Hirael — browse the full library on 21st.dev.