Five site-wide announcement bars — a rotating one-liner, an action card, a volt bar with email capture, a floating pill and a launch countdown with flipping digits — that slide in and collapse with a height spring when dismissed.
Slim
Newslim.tsxOne line with a tag and link. Several messages rotate with a blurred crossfade, a progress hairline and previous / next buttons.
| Prop | Type | Default | Description |
|---|---|---|---|
messages | { tag?; text; href?; linkLabel? }[] | — | One or more messages. |
interval | number | 6000 | Milliseconds per message when rotating. |
dismissible | boolean | true | Shows the dismiss button. |
open / defaultOpen | boolean | true | Shown (controlled / uncontrolled). |
onOpenChange | (open: boolean) => void | — | Called with false when dismissed. |
className | string | — | Classes for the outer element. |
With actions
Newactions.tsxTitle, supporting line, secondary and primary buttons and a dismiss, as a contained card or full width; stacks on narrow screens.
| Prop | Type | Default | Description |
|---|---|---|---|
title / description | string | — | Bold lead and supporting text. |
icon | ReactNode | — | Replaces the sparkle tile. |
primaryLabel / onPrimary | string / () => void | — | Primary action. |
secondaryLabel / onSecondary | string / () => void | — | Secondary action; empty string hides it. |
width | "contained" | "full" | "contained" | Rounded card inside the page width, or edge to edge. |
open / defaultOpen | boolean | true | Shown (controlled / uncontrolled). |
onOpenChange | (open: boolean) => void | — | Called with false when dismissed. |
className | string | — | Classes for the outer element. |
Brand
Newbrand.tsxFull-width volt bar with inline email capture that validates, shows a spinner and swaps to a confirmation with a blur.
| Prop | Type | Default | Description |
|---|---|---|---|
title / description | string | — | Message copy. |
placeholder / submitLabel | string | — | Field placeholder and button label. |
onSubmit | (email: string) => void | Promise<void> | — | Resolve to confirm; throw an Error to show its message. |
open / defaultOpen | boolean | true | Shown (controlled / uncontrolled). |
onOpenChange | (open: boolean) => void | — | Called with false when dismissed. |
className | string | — | Classes for the outer element. |
Floating pill
Newfloating.tsxA glass pill pinned to the bottom of the screen that springs up after a delay and drops away with a blur when dismissed.
| Prop | Type | Default | Description |
|---|---|---|---|
tag / text / linkLabel / href | string | — | Chip, message and link. |
onLinkClick | () => void | — | Called when the link is used. |
placement | "fixed" | "absolute" | "fixed" | Pin to the viewport or to the nearest positioned parent. |
delay | number | 400 | Milliseconds before it rises in. |
open / defaultOpen | boolean | true | Shown (controlled / uncontrolled). |
onOpenChange | (open: boolean) => void | — | Called with false when dismissed. |
className | string | — | Classes for the outer element. |
Countdown
Newcountdown.tsxLaunch bar with days, hours, minutes and seconds that flip on springs, a reminder toggle and a live state at zero. Time is only read in effects.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Lead text before the timer. |
target | string | number | — | ISO date or epoch ms to count down to. |
seconds | number | 200478 | Counts down from mount when no target is given. |
reminderLabel / onReminderChange | string / (on: boolean) => void | — | Reminder toggle (aria-pressed). |
liveLabel / liveHref | string | — | Link shown once the timer hits zero. |
tone | "default" | "brand" | "default" | Brand tints the header volt with a faint grid and glow. |
open / defaultOpen | boolean | true | Shown (controlled / uncontrolled). |
onOpenChange | (open: boolean) => void | — | Called with false when dismissed. |
className | string | — | Classes for the outer element. |
Install the whole set
Installs every announcement bars variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Also installs: Button
Accessibility
- Every bar is a labelled region with a real dismiss button ("Dismiss announcement").
- The rotator pauses on hover and focus, stops under reduced motion and only announces messages the user steps to.
- Email capture has a hidden label, aria-invalid and an alert for errors; the countdown is a role=timer with a minute-level label.
- Height, slide and digit springs become fades under reduced motion.