Top Banner Notification

TopBannerNotification mounts a slim position: fixed strip at the very top of the viewport. It carries a status message on the left and an animated call-to-action button on the right. The component dismisses itself (sets internal visible state to false) when the user clicks the dismiss control.

Three built-in themes are provided via BootTheme: a dark terminal look (classicDark), a light mode (classicLight), and a green-on-black hacker palette (hacker).

SSR note — this component is "use client" and uses position: fixed, so mount it once near the root of your layout.

Installation

npx shadcn@latest add @adv/top-banner-notification

Usage

import TopBannerNotification from '@/components/ui/top-banner-notification';

// In app/layout.tsx or a root client component:
<TopBannerNotification theme="classicDark" />

Example

Props