Announcement band set covering six placements: a dismissible top banner in solid, soft, and gradient tones, a split release-notes band, a rotating multi-message strip, a session countdown bar, a delayed corner card, and a sticky version-pill banner.
Also available for Vue ->$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/announcement.json$npx shadcn@latest add https://uipkge.dev/r/react/announcement.json$yarn dlx shadcn@latest add https://uipkge.dev/r/react/announcement.json$bunx shadcn@latest add https://uipkge.dev/r/react/announcement.jsonnpx shadcn@latest add @uipkge-react/announcementInstalls to:components/blocks/announcement/| Name | Type / Values | Default | Required |
|---|---|---|---|
variant | 'floating-pill' | 'top-bar' | 'interactive-ticker' | — | optional |
autoplay | boolean | — | optional |
className | string | — | optional |
Type aliases exported from this item's source. Use these to shape the data you pass in.
AnnouncementIteminterface AnnouncementItem {
id: string
category: 'release' | 'security' | 'maintenance' | 'feature'
badgeText: string
title: string
actionLabel: string
actionUrl?: string
cliSnippet?: string
}'use client'
import * as React from 'react'
import { ArrowRight, ChevronLeft, ChevronRight, Megaphone, Terminal, X } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { cn } from '@/lib/utils'
export interface AnnouncementItem {
id: string
category: 'release' | 'security' | 'maintenance' | 'feature'
badgeText: string
title: string
actionLabel: string
actionUrl?: string
cliSnippet?: string
}
export interface AnnouncementBannerProps {
variant?: 'floating-pill' | 'top-bar' | 'interactive-ticker'
autoplay?: boolean
className?: string
}
const announcements: AnnouncementItem[] = [
{
id: 'ann-1',
category: 'release',
badgeText: 'v2.4.0 Release',
title: 'Tailwind CSS v4 OKLCH tokens & 281+ production workbenches are live.',
actionLabel: 'Read Changelog',
actionUrl: 'https://uipkge.dev/changelog',
cliSnippet: 'npx shadcn-vue@latest add https://uipkge.dev/r/vue/init.json',
},
{
id: 'ann-2',
category: 'feature',
badgeText: 'Dual-Framework',
title: '100% Vue 3.5 & React 19 component parity achieved with zero runtime CSS.',
actionLabel: 'Explore Parity Matrix',
actionUrl: 'https://uipkge.dev/components',
cliSnippet: 'npx shadcn@latest add https://uipkge.dev/r/react/init.json',
},
{
id: 'ann-3',
category: 'security',
badgeText: 'Security Notice',
title: 'Upstream Reka UI & Radix dependency security patches verified and updated.',
actionLabel: 'Security Advisory',
actionUrl: 'https://uipkge.dev/security',
},
]
export function AnnouncementBanner({
variant = 'interactive-ticker',
autoplay = true,
className,
}: AnnouncementBannerProps) {
const [currentIndex, setCurrentIndex] = React.useState(0)
const [dismissed, setDismissed] = React.useState(false)
const [isPaused, setIsPaused] = React.useState(false)
const [copiedCli, setCopiedCli] = React.useState(false)
React.useEffect(() => {
if (!autoplay || isPaused) return
const timer = setInterval(() => {
setCurrentIndex((prev) => (prev + 1) % announcements.length)
}, 6000)
return () => clearInterval(timer)
}, [autoplay, isPaused])
const nextAnnouncement = () => {
setCurrentIndex((prev) => (prev + 1) % announcements.length)
}
const prevAnnouncement = () => {
setCurrentIndex((prev) => (prev - 1 + announcements.length) % announcements.length)
}
const copyCliSnippet = (snippet?: string) => {
if (!snippet) return
navigator.clipboard.writeText(snippet)
setCopiedCli(true)
setTimeout(() => setCopiedCli(false), 2000)
}
if (dismissed) return null
const current = announcements[currentIndex]
return (
<div
data-slot="announcement-banner"
data-variant={variant}
role="region"
aria-label="Announcement"
className={cn('relative z-50 transition-colors duration-200', className)}
onMouseEnter={() => setIsPaused(true)}
onMouseLeave={() => setIsPaused(false)}
>
{/* 1. Interactive Ticker Mode (Default) */}
{variant === 'interactive-ticker' && (
<div className="bg-muted/70 border-border text-foreground flex items-center justify-between gap-3 overflow-hidden border-b px-4 py-2 text-xs shadow-xs backdrop-blur-md">
<div className="mx-auto flex w-full max-w-6xl items-center justify-between gap-4">
{/* Left: Status Beacon & Item Indicator */}
<div className="flex shrink-0 items-center gap-3">
<div className="text-muted-foreground flex items-center gap-1.5 font-mono text-xs">
<span className="bg-primary size-2 animate-pulse rounded-full" />
<span className="text-foreground font-semibold">Live Dispatch</span>
</div>
<Badge
variant="secondary"
className={cn(
'px-2 py-0.5 font-mono text-xs',
current.category === 'release' && 'bg-primary/10 text-primary border-primary/20',
current.category === 'security' && 'border-warning/20 bg-warning/10 text-warning',
current.category === 'feature' && 'border-success/20 bg-success/10 text-success',
)}
>
{current.badgeText}
</Badge>
</div>
{/* Center: Dynamic Headline & Action Link */}
<div className="flex flex-1 items-center justify-center gap-2 truncate">
<p className="text-foreground truncate font-medium">{current.title}</p>
{current.actionUrl && (
<a
href={current.actionUrl}
className="text-primary hidden shrink-0 items-center gap-1 font-semibold hover:underline sm:inline-flex"
>
{current.actionLabel} <ArrowRight className="size-3" />
</a>
)}
</div>
{/* Right: Ticker Navigation & CLI / Dismiss */}
<div className="flex shrink-0 items-center gap-2">
{current.cliSnippet && (
<button
type="button"
className="bg-background border-border text-muted-foreground hover:text-foreground hidden items-center gap-1.5 rounded border px-2 py-0.5 font-mono text-xs transition-colors md:inline-flex"
onClick={() => copyCliSnippet(current.cliSnippet)}
>
<Terminal className="text-primary size-3" />
<span>{copiedCli ? 'Copied CLI!' : 'Copy CLI'}</span>
</button>
)}
<div className="border-border bg-background flex items-center overflow-hidden rounded-md border">
<button
type="button"
className="hover:bg-muted text-muted-foreground hover:text-foreground p-1 transition-colors"
aria-label="Previous announcement"
onClick={prevAnnouncement}
>
<ChevronLeft className="size-3.5" />
</button>
<span className="text-muted-foreground px-1.5 font-mono text-xs">
{currentIndex + 1}/{announcements.length}
</span>
<button
type="button"
className="hover:bg-muted text-muted-foreground hover:text-foreground p-1 transition-colors"
aria-label="Next announcement"
onClick={nextAnnouncement}
>
<ChevronRight className="size-3.5" />
</button>
</div>
<button
type="button"
aria-label="Dismiss banner"
className="text-muted-foreground hover:text-foreground hover:bg-muted rounded-md p-1 transition-colors"
onClick={() => setDismissed(true)}
>
<X className="size-3.5" />
</button>
</div>
</div>
</div>
)}
{/* 2. Floating Pill Mode */}
{variant === 'floating-pill' && (
<div className="mx-auto w-fit max-w-2xl px-4 py-2">
<div className="bg-card/90 border-border text-foreground hover:border-primary/40 flex items-center gap-3 rounded-full border py-1.5 pr-2 pl-3 text-xs shadow-md backdrop-blur-md transition-colors">
<Badge
variant="secondary"
className="bg-primary/10 text-primary border-primary/20 px-2 py-0.5 font-mono text-xs"
>
{current.badgeText}
</Badge>
<p className="text-foreground max-w-sm truncate font-medium">{current.title}</p>
{current.actionUrl && (
<a
href={current.actionUrl}
className="text-primary inline-flex shrink-0 items-center gap-1 font-semibold hover:underline"
>
{current.actionLabel} <ArrowRight className="size-3" />
</a>
)}
<button
type="button"
aria-label="Dismiss announcement"
className="text-muted-foreground hover:text-foreground hover:bg-muted rounded-full p-1 transition-colors"
onClick={() => setDismissed(true)}
>
<X className="size-3.5" />
</button>
</div>
</div>
)}
{/* 3. Top Solid Bar Mode */}
{variant === 'top-bar' && (
<div className="bg-primary text-primary-foreground flex items-center justify-between gap-3 px-4 py-2 text-xs shadow-xs">
<div className="mx-auto flex w-full max-w-6xl items-center justify-between gap-4">
<div className="flex items-center gap-2 truncate">
<Megaphone className="size-4 shrink-0" />
<span className="font-mono font-bold">[{current.badgeText}]</span>
<span className="truncate">{current.title}</span>
</div>
<div className="flex shrink-0 items-center gap-3">
{current.actionUrl && (
<a
href={current.actionUrl}
className="inline-flex items-center gap-1 font-semibold underline-offset-4 hover:underline"
>
{current.actionLabel} <ArrowRight className="size-3" />
</a>
)}
<button
type="button"
aria-label="Dismiss banner"
className="text-primary-foreground/80 hover:text-primary-foreground hover:bg-primary-foreground/15 rounded p-1 transition-colors"
onClick={() => setDismissed(true)}
>
<X className="size-3.5" />
</button>
</div>
</div>
</div>
)}
</div>
)
}
export default AnnouncementBanner
'use client'
import { ArrowRight, CircleAlert, Info } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
export function AnnouncementBannerSplit({ tone = 'neutral' }: { tone?: 'neutral' | 'attention' }) {
const Icon = tone === 'attention' ? CircleAlert : Info
return (
<section
data-slot="announcement-banner-split"
className={`border-b ${tone === 'attention' ? 'border-border bg-muted' : 'border-border bg-card'}`}
>
<div className="mx-auto flex max-w-6xl flex-col gap-4 px-6 py-4 sm:flex-row sm:items-center sm:gap-8">
{/* Message column carries the classification; the action column stays
the same width whatever the message length, so a stack of these
banners aligns down the page. */}
<div className="flex min-w-0 flex-1 items-start gap-3">
<Icon
className={`mt-0.5 size-4 shrink-0 ${tone === 'attention' ? 'text-destructive' : 'text-muted-foreground'}`}
aria-hidden="true"
/>
<div className="min-w-0">
<div className="flex flex-wrap items-center gap-2">
<Badge variant={tone === 'attention' ? 'outline' : 'secondary'}>
{tone === 'attention' ? 'Scheduled maintenance' : 'Release 2.4.0'}
</Badge>
<span className="text-muted-foreground font-mono text-xs">Aug 14, 2026 · 02:00–04:00 UTC</span>
</div>
<p className="mt-1.5 text-sm leading-relaxed">
{tone === 'attention'
? 'Query serving stays online. Scheduled materialisation pauses for the window and resumes automatically.'
: 'Command palette, table virtualisation past 10k rows, and AA-contrast sidebar badges in dark mode.'}
</p>
</div>
</div>
<Separator orientation="vertical" className="hidden h-10 sm:block" />
<div className="flex shrink-0 items-center gap-2">
<Button variant="outline" size="sm">
{tone === 'attention' ? 'Status page' : 'Full changelog'}
<ArrowRight className="ml-1.5 size-3.5" aria-hidden="true" />
</Button>
<Button variant="ghost" size="sm">
Subscribe
</Button>
</div>
</div>
</section>
)
}
'use client'
import { useEffect, useState } from 'react'
import { ArrowRight, Bell, X } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
interface AnnouncementCornerToastProps {
/** Milliseconds before the card slides in. */
delay?: number
/** sessionStorage key holding the dismissal. */
storageKey?: string
}
export function AnnouncementCornerToast({
delay = 1200,
storageKey = 'uipkge:corner-announcement-dismissed',
}: AnnouncementCornerToastProps) {
// Hidden on the server and on first paint; the delay timer is what reveals it.
const [visible, setVisible] = useState(false)
useEffect(() => {
const wasDismissed = () => {
try {
return window.sessionStorage.getItem(storageKey) === '1'
} catch {
return false
}
}
if (wasDismissed()) return
const timer = setTimeout(() => setVisible(true), delay)
return () => clearTimeout(timer)
}, [delay, storageKey])
function dismiss() {
setVisible(false)
try {
window.sessionStorage.setItem(storageKey, '1')
} catch {
// Blocked storage: the dismissal still holds for this page view.
}
}
return (
<div
data-slot="announcement-corner-toast"
className={`fixed right-4 bottom-4 z-50 w-[22rem] max-w-[calc(100vw-2rem)] transition duration-300 ${
visible ? 'translate-y-0 opacity-100' : 'pointer-events-none invisible translate-y-4 opacity-0'
}`}
role="complementary"
aria-label="Product announcement"
aria-hidden={!visible}
>
<Card className="shadow-lg">
<CardContent className="p-4">
<div className="flex items-start gap-3">
<span
className="border-border bg-muted flex size-10 shrink-0 items-center justify-center rounded-lg border"
aria-hidden="true"
>
<Bell className="text-primary size-4" />
</span>
<div className="min-w-0 flex-1">
<Badge variant="secondary" className="mb-1.5">
New
</Badge>
<p className="text-sm font-semibold">Scoping now follows SCIM groups</p>
<p className="text-muted-foreground mt-1 text-xs leading-relaxed">
Move someone between teams in your IdP and their dashboards follow within the sync window.
</p>
</div>
<Button
variant="ghost"
size="icon"
className="-mt-1 -mr-1 size-7 shrink-0"
aria-label="Dismiss announcement"
onClick={dismiss}
>
<X className="size-3.5" aria-hidden="true" />
</Button>
</div>
<Separator className="my-3" />
<div className="flex items-center gap-2">
<Button size="sm" className="h-7">
Read the changelog
<ArrowRight className="ml-1 size-3.5" aria-hidden="true" />
</Button>
<Button variant="ghost" size="sm" className="h-7" onClick={dismiss}>
Not now
</Button>
</div>
</CardContent>
</Card>
</div>
)
}
'use client'
import { useEffect, useMemo, useState } from 'react'
import { ArrowRight, Timer, X } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
interface AnnouncementCountdownBarProps {
/** ISO timestamp the countdown runs to. */
deadline?: string
/** sessionStorage key holding the dismissal. */
storageKey?: string
}
export function AnnouncementCountdownBar({
deadline = '',
storageKey = 'uipkge:countdown-dismissed',
}: AnnouncementCountdownBarProps) {
const [dismissed, setDismissed] = useState(false)
// Null until mounted: the server has no clock the client agrees with, so the
// digits only appear once the timer is running.
const [remaining, setRemaining] = useState<number | null>(null)
const target = useMemo(() => {
const parsed = deadline ? Date.parse(deadline) : Number.NaN
// Fall back to 72 hours out so the demo and a mis-set prop still read sensibly.
return Number.isNaN(parsed) ? Date.now() + 72 * 60 * 60 * 1000 : parsed
}, [deadline])
useEffect(() => {
try {
setDismissed(window.sessionStorage.getItem(storageKey) === '1')
} catch {
setDismissed(false)
}
const tick = () => setRemaining(target - Date.now())
tick()
const timer = setInterval(tick, 1000)
return () => clearInterval(timer)
}, [target, storageKey])
function dismiss() {
setDismissed(true)
try {
window.sessionStorage.setItem(storageKey, '1')
} catch {
// Blocked storage: the dismissal still holds for this page view.
}
}
if (dismissed) return null
const total = Math.floor(Math.max(remaining ?? 0, 0) / 1000)
const parts = [
{ label: 'd', value: Math.floor(total / 86400) },
{ label: 'h', value: Math.floor((total % 86400) / 3600) },
{ label: 'm', value: Math.floor((total % 3600) / 60) },
{ label: 's', value: total % 60 },
]
return (
<div data-slot="announcement-countdown-bar" className="border-border bg-muted/60 border-b backdrop-blur">
<div className="mx-auto flex min-h-11 max-w-6xl flex-wrap items-center gap-x-4 gap-y-2 px-6 py-2 text-sm">
<Badge variant="secondary" className="shrink-0 gap-1.5">
<Timer className="size-3" aria-hidden="true" />
Ends soon
</Badge>
<p className="min-w-0">
<span className="font-medium">Annual plans are 20% off</span>
<span className="text-muted-foreground"> for teams that start before the quarter closes.</span>
</p>
{/* tabular-nums + fixed-width cells keep the bar from reflowing each second. */}
{remaining !== null && (
<div className="text-muted-foreground flex items-center gap-1 font-mono text-xs">
{parts.map((part) => (
<span key={part.label} className="tabular-nums">
<span className="text-foreground inline-block min-w-[2ch] text-right font-semibold">
{String(part.value).padStart(2, '0')}
</span>
{part.label}
</span>
))}
</div>
)}
<div className="ml-auto flex shrink-0 items-center gap-1">
<Button variant="ghost" size="sm" className="h-7">
Claim it
<ArrowRight className="ml-1 size-3.5" aria-hidden="true" />
</Button>
<Separator orientation="vertical" className="hidden h-5 sm:block" />
<Button variant="ghost" size="icon" className="size-7" aria-label="Dismiss announcement" onClick={dismiss}>
<X className="size-3.5" aria-hidden="true" />
</Button>
</div>
</div>
</div>
)
}
'use client'
import { useEffect, useRef, useState } from 'react'
import { ArrowRight } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
const messages = [
{ label: 'New', text: 'Row-level scoping now evaluates against SCIM groups.', cta: 'Changelog' },
{ label: 'Event', text: 'Live walkthrough of the five-week rollout, every Thursday.', cta: 'Save a seat' },
{ label: 'Docs', text: 'The reconciliation checklist for your first close is published.', cta: 'Read it' },
]
export function AnnouncementRotatingStrip({ interval = 6000 }: { interval?: number }) {
const [index, setIndex] = useState(0)
const paused = useRef(false)
useEffect(() => {
const timer = setInterval(() => {
if (!paused.current) setIndex((value) => (value + 1) % messages.length)
}, interval)
return () => clearInterval(timer)
}, [interval])
return (
<div
data-slot="announcement-rotating-strip"
className="border-border bg-muted/60 border-b backdrop-blur"
onMouseEnter={() => (paused.current = true)}
onMouseLeave={() => (paused.current = false)}
onFocus={() => (paused.current = true)}
onBlur={() => (paused.current = false)}
>
<div className="mx-auto flex h-11 max-w-6xl items-center gap-3 px-6 text-sm">
{/* aria-live announces the rotation to screen readers without stealing focus. */}
<div className="flex min-w-0 flex-1 items-center gap-3" aria-live="polite" aria-atomic="true">
<Badge variant="secondary" className="shrink-0">
{messages[index].label}
</Badge>
<p className="min-w-0 truncate">{messages[index].text}</p>
<Button variant="link" size="sm" className="hidden h-auto shrink-0 p-0 text-xs sm:inline-flex">
{messages[index].cta}
<ArrowRight className="ml-1 size-3" aria-hidden="true" />
</Button>
</div>
<div className="flex shrink-0 items-center gap-1.5">
{messages.map((message, i) => (
<button
key={message.text}
type="button"
className={`focus-visible:ring-ring size-1.5 rounded-full transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none ${
i === index ? 'bg-foreground' : 'bg-muted-foreground/40 hover:bg-muted-foreground'
}`}
aria-label={`Show announcement ${i + 1} of ${messages.length}`}
aria-current={i === index ? 'true' : undefined}
onClick={() => setIndex(i)}
/>
))}
</div>
</div>
</div>
)
}
'use client'
import * as React from 'react'
import { ArrowRight, Megaphone, X } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { cn } from '@/lib/utils'
export interface BannerAnnouncementStickyProps {
className?: string
}
export function BannerAnnouncementSticky({ className }: BannerAnnouncementStickyProps) {
const [isVisible, setIsVisible] = React.useState(true)
if (!isVisible) return null
return (
<aside
data-slot="banner-announcement-sticky"
className={cn(
'border-border bg-card/90 relative z-50 border-b px-4 py-2.5 backdrop-blur-md transition-colors sm:px-6',
className,
)}
>
<div className="mx-auto flex max-w-7xl items-center justify-between gap-4 font-mono text-xs">
{/* Left / Center Content */}
<div className="flex min-w-0 flex-1 items-center justify-center gap-3 sm:justify-start">
<Badge
variant="secondary"
className="bg-primary/10 text-primary border-primary/20 shrink-0 px-2 py-0.5 text-xs font-bold tracking-wider uppercase"
>
v2.4.0 Release
</Badge>
<p className="text-foreground flex items-center gap-1.5 truncate">
<Megaphone className="text-warning hidden size-3 shrink-0 sm:inline" />
<span>Announcing 450+ Marketing & SaaS Blocks with Tailwind v4 OKLCH token engine.</span>
</p>
<a href="#" className="text-primary inline-flex shrink-0 items-center gap-1 font-bold hover:underline">
<span>Read Release Notes</span>
<ArrowRight className="size-3" />
</a>
</div>
{/* Dismiss Trigger Button */}
<button
type="button"
className="hover:bg-muted text-muted-foreground hover:text-foreground flex size-6 shrink-0 items-center justify-center rounded-md transition-colors"
aria-label="Dismiss banner"
onClick={() => setIsVisible(false)}
>
<X className="size-3.5" />
</button>
</div>
</aside>
)
}
export default BannerAnnouncementSticky
Raw manifest:https://uipkge.dev/r/react/announcement.json
