Banner
Add a banner to your site.
Fumadocs
Origin UIInstallation
bash
npx shadcn@latest add @redpanda/bannerbash
pnpm dlx shadcn@latest add @redpanda/bannerbash
yarn dlx shadcn@latest add @redpanda/bannerbash
bunx shadcn@latest add @redpanda/bannerbash
nubx shadcn@latest add @redpanda/bannerbash
aube dlx shadcn@latest add @redpanda/bannerAn 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:
plaintext
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
tsx
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> );}