Banner

Fumadocs

Origin UI

Installation

An example banner representation for suspended organization.

When to use

Use Banner for important site-wide announcements that need immediate user attention:

Use Banner when:

Announcing system maintenance or downtime
Communicating critical security updates
Promoting important new features
Displaying legal notices or policy changes
Showing account status issues

Don't use Banner when:

Message is user-specific (use alerts or notifications)
Content is promotional but not critical
Information is page-specific (use inline alerts)
Message changes frequently

Anatomy

The Banner component provides a persistent notification area:

Banner Container (full-width, top of page)
┌─────────────────────────────────────────────────────────────┐
│ Banner Wrapper                                              │
│ ├── Icon (optional)                                         │
│ ├── Message Content                                         │
│ └── Dismiss Button (optional)                               │
└─────────────────────────────────────────────────────────────┘

Key Features:

Persistent: Stays visible across page navigation
Dismissible: Optional close functionality
Responsive: Adapts to different screen sizes
Accessible: Proper ARIA labels and keyboard support

Usage

import { Banner } from '@/components/redpanda-ui/banner';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}): React.ReactElement {
  return (
    <html lang="en">
      <body>
        <Banner>Hello World</Banner>
        {children}
      </body>
    </html>
  );
}

Examples

Variants

With Action

With Multiple Actions

Dismissible

Credits

We use Fumadocs as inspiration for the banner component.
We use Origin UI as inspiration for the banner style.

Recent changes

patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested b…#133
minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109

See full history →