Ruixen Pro is now live.50+ premium components, templates, blocks, and lifetime updates.

Command Palette

Search for a command to run...

Docs
Banner Announcement

Banner Announcement

A dismissible announcement banner with shimmer entrance, height-collapse dismiss, and optional badge pill.

Installation

Usage

import BannerAnnouncement from "@/components/ruixen/banner-announcement";
 
export default function MyBanner() {
  return (
    <BannerAnnouncement
      badge="New"
      action={{ label: "Learn more", href: "/features" }}
    >
      Real-time collaboration is now available for your team.
    </BannerAnnouncement>
  );
}

Props

PropTypeDefaultDescription
childrenReact.ReactNode-The announcement message
badgestring-Optional pill label before the message
action{ label: string; href: string }-Action link with arrow
dismissiblebooleantrueWhether the banner can be dismissed
onDismiss() => void-Callback fired after dismiss animation
classNamestring-Additional CSS classes