Anex UI logoAnex UI
npm install anexui
Documentation

Documentation

Banner

A full-width site-level announcement bar with colour variants, an optional action, and a dismiss button.

Preview

Special offerGet 3 months free — upgrade before Friday.
New components availableCarousel, Banner, and Timeline were just released.

Usage

import { Banner } from "anexui";

<Banner title="We updated our privacy policy." />
Copy code

Variants

<Banner variant="info" title="Scheduled maintenance on Sunday." />
<Banner variant="success" title="Your plan has been upgraded to Pro." />
<Banner variant="warning" title="Your trial expires in 3 days." />
<Banner variant="error" title="Service degradation detected." />
<Banner variant="promo" title="50% off Pro — this weekend only." />
Copy code

With description and action

<Banner
  variant="warning"
  title="Trial ending soon"
  description="Upgrade now to keep access to all features."
  action={{ label: "Upgrade", onClick: () => router.push("/billing") }}
/>
Copy code

Dismissible

<Banner
  variant="info"
  title="Welcome to Anex UI!"
  onDismiss={() => setVisible(false)}
/>
Copy code

Props

| Prop | Type | Default | Description | |---|---|---|---| | variant | "info" \| "success" \| "warning" \| "error" \| "promo" | "info" | Colour scheme | | title | string | — | Required. Main banner text | | description | string | — | Secondary text below the title | | action | { label: string; onClick: () => void } | — | Inline CTA button | | onDismiss | () => void | — | Shows a close button when provided |

All standard HTML <div> attributes are accepted.