Banner

Component

Eye-catching Tailwind banner components for announcements, app updates, and cookie consent overlays.

Install via CLI

Run this command to automatically add the component and its dependencies to your project.

npx @abhaysinghr516/business-wish add banner
New to the CLI? Run npx @abhaysinghr516/business-wish init first to initialize your project.

A highly visible Tailwind banner captures user attention instantly without breaking the page flow. From top-level promotional bars to compliance-focused Tailwind CSS cookie banners, these components are built with smooth entry animations and clear calls to action.

Banners are often used alongside a Header, or you can use an Alert for smaller inline notifications.

Basic Banner

A clean, flat banner ideal for simple informational messages.

import React from "react";
import { Bell } from "lucide-react";

const BasicBanner: React.FC = () => (
  <div className="bg-neutral-50 dark:bg-neutral-900 text-neutral-800 dark:text-neutral-200 px-6 py-4 rounded-2xl max-w-xl mx-auto border border-neutral-200/60 dark:border-neutral-800 transition-colors duration-300">
    <div className="flex items-center space-x-3">
      <Bell className="w-4 h-4 text-neutral-500 dark:text-neutral-400" />
      <div className="text-[14px] font-medium tracking-tight">
        A new software update is available.
      </div>
    </div>
  </div>
);

export default BasicBanner;

A sleek banner layout splitting information and actionable buttons.

"use client";

import React from "react";
import { Bell, ChevronRight } from "lucide-react";

const BannerwithActions: React.FC = () => (
  <div className="bg-neutral-50 dark:bg-neutral-900 px-5 py-3.5 rounded-2xl flex flex-col sm:flex-row items-center justify-between max-w-2xl mx-auto border border-neutral-200/60 dark:border-neutral-800 transition-colors duration-300">
    <div className="mb-4 sm:mb-0 flex items-center space-x-3">
      <Bell className="w-4 h-4 text-neutral-500 dark:text-neutral-400" />
      <p className="text-[14px] font-medium tracking-tight text-neutral-800 dark:text-neutral-200">
        Review your security settings.
      </p>
    </div>
    <div className="flex items-center justify-center sm:justify-end space-x-2">
      <button className="group flex items-center space-x-1.5 bg-neutral-900 dark:bg-neutral-100 text-white dark:text-neutral-900 px-3.5 py-2 rounded-xl text-[13px] font-medium hover:bg-neutral-800 dark:hover:bg-neutral-200 transition-colors">
        <span>Review</span>
        <ChevronRight className="w-3.5 h-3.5 transform group-hover:translate-x-0.5 transition-transform" />
      </button>
      <button className="group flex items-center space-x-1.5 bg-transparent text-neutral-600 dark:text-neutral-400 px-3.5 py-2 rounded-xl text-[13px] font-medium hover:bg-neutral-200/50 dark:hover:bg-neutral-800 transition-colors">
        <span>Dismiss</span>
      </button>
    </div>
  </div>
);

export default BannerwithActions;

A highly pronounced but beautifully flat banner intended for feature marketing or critical upgrades.

"use client";

import React from "react";
import { Bell, ChevronRight, X } from "lucide-react";

const BannerwithHeadingAndButton: React.FC = () => (
  <div className="relative bg-white dark:bg-[#0a0a0a] p-8 max-w-xl mx-auto rounded-3xl border border-neutral-200 dark:border-neutral-800 overflow-hidden shadow-[0_2px_20px_rgba(0,0,0,0.04)] dark:shadow-[0_2px_20px_rgba(0,0,0,0.2)] transition-colors duration-300">
    <div className="absolute top-5 right-5">
      <button className="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors p-1 rounded-full hover:bg-neutral-100 dark:hover:bg-neutral-900">
        <X className="w-4 h-4" />
      </button>
    </div>
    <div className="space-y-3">
      <div className="flex items-center space-x-3">
        <div className="w-10 h-10 rounded-full bg-neutral-100 dark:bg-neutral-900 flex items-center justify-center">
          <Bell className="w-5 h-5 text-neutral-700 dark:text-neutral-300" />
        </div>
        <div className="text-xl font-semibold tracking-tight text-neutral-900 dark:text-neutral-100">
          Unlock Premium
        </div>
      </div>
      <div className="text-[15px] text-neutral-500 dark:text-neutral-400 leading-relaxed max-w-[90%]">
        Get access to advanced features and priority support. Upgrade today and save 20% on the annual plan.
      </div>
      <div className="pt-2">
        <button className="group flex items-center space-x-2 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 px-5 py-2.5 rounded-xl text-[14px] font-medium hover:bg-neutral-800 dark:hover:bg-neutral-200 transition-colors">
          <span>Upgrade Now</span>
          <ChevronRight className="w-4 h-4 transform group-hover:translate-x-0.5 transition-transform" />
        </button>
      </div>
    </div>
  </div>
);

export default BannerwithHeadingAndButton;

A modern, glassmorphic cookie consent banner hovering at the bottom of the viewport.

"use client";

import React, { useState } from "react";
import { Cookie } from "lucide-react";

const CookieBanner: React.FC = () => {
    const [isVisible, setIsVisible] = useState(true);

    if (!isVisible) return null;

    return (
        <div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 w-[calc(100%-3rem)] max-w-3xl z-50">
            <div className="bg-neutral-900/95 dark:bg-neutral-100/95 backdrop-blur-md px-6 py-4 rounded-2xl flex flex-col sm:flex-row items-center justify-between shadow-2xl border border-white/10 dark:border-black/10 transition-colors duration-300">
                <div className="mb-4 sm:mb-0 flex items-start sm:items-center space-x-3 text-neutral-100 dark:text-neutral-900">
                    <Cookie className="w-5 h-5 flex-shrink-0 mt-0.5 sm:mt-0 opacity-80" />
                    <p className="text-[14px] font-medium tracking-tight leading-relaxed max-w-md">
                        We use cookies to improve your experience and analyze our traffic. 
                    </p>
                </div>
                <div className="flex items-center w-full sm:w-auto justify-end space-x-3">
                    <button 
                        onClick={() => setIsVisible(false)}
                        className="text-neutral-300 dark:text-neutral-600 px-3 py-2 rounded-xl text-[13px] font-medium hover:text-white dark:hover:text-black hover:bg-white/5 dark:hover:bg-black/5 transition-colors"
                    >
                        Decline
                    </button>
                    <button 
                        onClick={() => setIsVisible(false)}
                        className="bg-white dark:bg-black text-neutral-900 dark:text-white px-4 py-2 rounded-xl text-[13px] font-medium hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-colors shadow-sm"
                    >
                        Accept All
                    </button>
                </div>
            </div>
        </div>
    );
};

export default CookieBanner;

Floating Top Banner

A beautifully pill-shaped alert banner that drifts down from the top.

"use client";

import React, { useState } from "react";
import { X } from "lucide-react";

const FloatingTopBanner: React.FC = () => {
    const [isVisible, setIsVisible] = useState(true);

    if (!isVisible) return null;

    return (
        <div className="fixed top-6 left-1/2 transform -translate-x-1/2 z-50 w-full max-w-lg px-4 space-y-4">
            <div className="bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 px-4 py-2.5 rounded-full flex items-center justify-between shadow-lg mx-auto w-fit transition-all duration-300 animate-in slide-in-from-top-4">
                <div className="flex items-center space-x-2 pl-2">
                    <span className="flex h-2 w-2 relative">
                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                        <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
                    </span>
                    <p className="text-[13px] font-medium tracking-tight">
                        App version 2.0 is now live!
                    </p>
                    <a href="#" className="text-[13px] font-medium opacity-70 hover:opacity-100 underline decoration-white/30 dark:decoration-black/30 underline-offset-2 transition-opacity pl-2">
                        Read more
                    </a>
                </div>
                <button 
                    onClick={() => setIsVisible(false)}
                    className="ml-4 p-1 rounded-full text-neutral-400 hover:text-white dark:text-neutral-500 dark:hover:text-black hover:bg-white/10 dark:hover:bg-black/10 transition-colors"
                >
                    <X className="w-3.5 h-3.5" />
                </button>
            </div>
        </div>
    );
};

export default FloatingTopBanner;