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.

Frequently asked questions

Does the dismiss state persist across page reloads?

No, by default it resets on reload since it uses component state. Persist it in localStorage in the dismiss handler if you want it to stay hidden.

Can I use it without the arrow link?

Yes, the link URL and label are props — omit them and the banner renders as a plain message with just the dismiss button.

Where should it sit relative to my navbar?

Above it. Banner 01 is designed to sit at the very top of the page, before the navbar.