"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; import { ArrowRightIcon, XIcon } from "@kineticui/icons"; export type AnnouncementBannerProps = { children: React.ReactNode; /** Small pill before the text, e.g. "New". */ tag?: string; href?: string; linkLabel?: string; /** accent: lime bar. subtle: surface bar. gradient: animated sheen. */ variant?: "accent" | "subtle" | "gradient"; /** Remember dismissal in localStorage under this key. */ dismissKey?: string; dismissible?: boolean; className?: string; }; /** Slim top-of-page announcement with optional link and remembered dismissal. */ export function AnnouncementBanner({ children, tag, href, linkLabel = "Learn more", variant = "accent", dismissKey, dismissible = true, className, }: AnnouncementBannerProps) { const [open, setOpen] = React.useState(true); React.useEffect(() => { if (!dismissKey) return; try { if (localStorage.getItem(dismissKey) === "1") setOpen(false); } catch { /* storage unavailable */ } }, [dismissKey]); const dismiss = () => { setOpen(false); if (dismissKey) { try { localStorage.setItem(dismissKey, "1"); } catch { /* storage unavailable */ } } }; return ( {open ? (

{tag ? ( {tag} ) : null} {children} {href ? ( {linkLabel} ) : null}

{dismissible ? ( ) : null} ) : null} ); }

Announcement Banner

Installation

Exports