Banner 01

About this block

Banner 01 is a full-width announcement banner designed to appear at the very top of a page, above the navbar. It displays a short message with an inline arrow link and a dismiss button that hides the banner via local state. Built with shadcn/ui and Tailwind CSS, it is fully accessible with proper ARIA labels on the dismiss button. The banner text, link URL, and link label are all configurable via props.

When to use it

• Time-sensitive promotions such as launch discounts, limited offers, or seasonal sales
• Feature announcements where you want every site visitor to see a specific message for a period of time
• Important product notices like scheduled maintenance windows or policy changes
• Product Hunt launches where surfacing the launch link to all visitors for a 24-hour period drives votes

Notes

Persist the dismissed state in localStorage rather than component state if you want the banner to stay hidden across page navigations. The current implementation resets on page reload.