A header topped by an announcement strip that plays like stories: segments fill over time, messages roll vertically and hover pauses the run. Dismissing folds the strip away, and the bar below carries a tracking number field with validation.
npx shadcn@latest add https://hyperblur.dev/r/navbar-banner-stories.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/navbar-banner-stories.tsx.
import { NavbarBannerStories } from "@/components/hyperblur/navbar-banner-stories"
<NavbarBannerStories onTrack={(code) => console.log(code)} showBackdrop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Parcel" | Product name next to the box mark. |
| messages | { tag: string; text: string; link?: { label: string; href: string } }[] | Holiday cutoff, New lockers, Rates | Announcements that rotate in the strip. |
| interval | number | 5000 | Milliseconds each message stays before the next one rolls in. |
| defaultMessage | number | 0 | Message shown first. |
| onDismiss | () => void | Called when the strip is dismissed. | |
| links | { label: string; href: string }[] | Ship, Track, Business, Locations, Support | Main links. Links after the third hide first as space runs out. |
| active | number | Controlled index of the current link. Pair with onActiveChange. | |
| defaultActive | number | 0 | Current link index when uncontrolled. |
| onActiveChange | (index: number) => void | Called when a link is clicked. | |
| onTrack | (code: string) => void | Called with the cleaned tracking number when it has 8 to 22 letters or digits. | |
| signIn | { label: string; href: string } | null | { label: "Sign in", href: "#" } | Link on the right. Pass null to hide it. |
| accent | string | "#ffb224" | Color of the segments, tags, mark, Track button and focus rings. |
| showBackdrop | boolean | true | Render a sample page under the bar for previews. Turn it off in a real layout. |