Command Palette

Search for a command to run...

Docs
Banner Announcement

Banner Announcement

A dismissible announcement banner with multiple variants and action links.

Installation

Usage

import BannerAnnouncement from "@/components/ruixen/banner-announcement";
import { Sparkles } from "lucide-react";
 
export default function MyBanner() {
  return (
    <BannerAnnouncement
      variant="gradient"
      icon={<Sparkles className="size-4" />}
      actionLabel="Learn more"
      actionHref="/features"
    >
      Introducing our new feature: Real-time collaboration is now available!
    </BannerAnnouncement>
  );
}

Props

PropTypeDefaultDescription
childrenReact.ReactNode-The announcement message
variant"default" | "gradient" | "minimal" | "accent""default"Visual style of the banner
iconReact.ReactNode-Icon to display before message
actionLabelstring-Text for the action link
actionHrefstring-URL for the action link
dismissiblebooleantrueWhether banner can be dismissed
onDismiss() => void-Callback when dismissed
classNamestring-Additional CSS classes

Variants

VariantDescription
defaultPrimary background color
gradientPurple to indigo gradient
minimalMuted background with border
accentAmber to orange gradient for urgent messages