Announcement Banner

Promo banners with dismiss functionality and scrolling marquee variant.

Banner Types

New collection just dropped!

Flash sale: 50% off everything!

Scheduled maintenance tonight

Marquee Banner

Free shipping on orders over $50New arrivals every weekJoin our rewards programFree shipping on orders over $50New arrivals every weekJoin our rewards program

Usage

import { AnnouncementBanner, MarqueeBanner } from "@/components/profile"

// Static banner
<AnnouncementBanner
  message="New collection dropped!"
  type="promo"
  action={{ label: "Shop", onClick: () => window.location.assign("/pricing") }}
  dismissible
/>

// Scrolling marquee
<MarqueeBanner
  messages={["Free shipping", "New arrivals", "Rewards"]}
  speed="normal"
/>

Props

Prop	Type	Default
message	string	required
type	"default" \| "promo" \| "alert" \| "new" \| "gift"	"default"
action	{ label, onClick }	-
dismissible	boolean	true
onDismiss	() => void	-