Banner

Component

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

On this page

Basic Banner Banner with Actions Banner with Heading and Button Cookie Banner Floating Top Banner

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.

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;

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;

Badge

Bottom Navigation