ns-ui
A queued announcement bar that hands off honestly: dismissing one notice shears it upward while the next arrives from below AND the bar's own height eases between the two measured heights, so the page reflows with the message instead of snapping under it, and the queue pips physically shorten by one.
Use when Pick announcement-bar-relay when several notices have to share one page-width bar and you care that the content below doesn't jump as they hand off — it measures the next message's height before the swap and eases the bar between the two, and shows a pip row so a visitor knows how many notices are left. Pick banner-tear-stub instead for a single dismissible notice the user may want back (it leaves a reopenable stub), or toast-gravity-stack when the notices are transient and self-dismissing rather than page furniture.
Install
npx shadcn add https://design.helpmarq.comEverything here sits under the announcement bar, so the page moves with the message instead of snapping under it when one notice hands off to the next.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | AnnouncementItem[] | — | The queue, front to back. Dismissed ids are skipped. |
| storageKeyPrefix? | string | — | Namespaced localStorage prefix; each dismissed id is written as `${storageKeyPrefix}${id}` = "1". @default "ns-announcement-bar-relay:" |
| resetOnMount? | boolean | — | Clear this queue's stored dismissals on mount — for demos and previews, so a replaying page can't permanently empty itself. @default false |
| onExhausted? | () => void | — | Fires once the last item has been dismissed and the bar has collapsed. |
| className? | string | — | — |