2 variants

Announcement

The one thing worth saying this week, as a strip across the top or a card in the corner, remembered once it is dismissed.

Bar

A full width strip above the header, in the brand color or the page's own surface. Closing it collapses the row smoothly and remembers the choice.

NewAgent components are here, six of them.See what shipped

AcmeProductPricingChangelog

Ship the week you planned

Close the bar above and the page moves up to meet the top.

page.tsx

import { AnnouncementBar } from "@/components/blocks/announcement-bar";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <AnnouncementBar
        tone="brand"
        tag="New"
        message="Agent components are here."
        link={{ label: "See what shipped", href: "/changelog" }}
        storageKey="announce-agents"
      />
      {children}
    </>
  );
}

"use client";

import { ArrowRight, X } from "lucide-react";
import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";

export interface AnnouncementBarProps {
  /** A short tag before the message, such as "New". */
  tag?: string;
  message: string;
  link?: { label: string; href: string };
  /** "brand" fills the bar with the primary color; "subtle" keeps it on the page's own surface. Default "subtle". */

149 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/announcement-bar

Toast

A card that rises into the corner a moment after the page settles. It never takes focus, leaves faster than it came, and stays gone once closed.

Acme

page.tsx

import { AnnouncementToast } from "@/components/blocks/announcement-toast";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <AnnouncementToast
        eyebrow="Just shipped"
        title="Step forms, with review"
        action={{ label: "Try it", href: "/blocks/step-form" }}
        storageKey="announce-step-form"
      />
    </>
  );
}

"use client";

import { Sparkles, X } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { type ReactNode, useEffect, useState } from "react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export interface AnnouncementToastProps {
  /** A small label over the title, such as "Just shipped". */
  eyebrow?: string;
  title: string;

125 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/announcement-toast