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
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The announcement message |
variant | "default" | "gradient" | "minimal" | "accent" | "default" | Visual style of the banner |
icon | React.ReactNode | - | Icon to display before message |
actionLabel | string | - | Text for the action link |
actionHref | string | - | URL for the action link |
dismissible | boolean | true | Whether banner can be dismissed |
onDismiss | () => void | - | Callback when dismissed |
className | string | - | Additional CSS classes |
Variants
| Variant | Description |
|---|---|
default | Primary background color |
gradient | Purple to indigo gradient |
minimal | Muted background with border |
accent | Amber to orange gradient for urgent messages |

