Alert

Component

Responsive Tailwind alert components for displaying important messages, warnings, and success states to users.

On this page
Simple AlertDismissable AlertCustom AlertFloating AlertGhost AlertOutline Alert

Install via CLI

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

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

A Tailwind alert is essential for communicating feedback or system status. From simple banners to dismissible, interactive Tailwind CSS alert components, these designs offer high readability and premium aesthetics.

For more transient or temporary messages, consider using a Toast notification, or for actions requiring user confirmation, try a Modal.

Simple Alert

A flat, highly-readable alert ideal for general information and non-intrusive notices.

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

const Alert = () => {
  return (
    <div
      className="bg-blue-50/50 dark:bg-blue-900/10 rounded-2xl shadow-sm border border-transparent dark:border-blue-900/20 px-5 py-4 max-w-md mx-auto sm:max-w-sm lg:max-w-lg transition-colors duration-300"
      role="alert"
    >
      <div className="flex items-start space-x-3">
        <Info className="w-5 h-5 text-blue-500 dark:text-blue-400 mt-0.5 flex-shrink-0" />
        <div className="flex-grow">
          <p className="text-[15px] font-medium text-blue-900 dark:text-blue-100 mb-0.5">
            New Feature Available
          </p>
          <p className="text-[14px] text-blue-700 dark:text-blue-300/80 leading-relaxed">
            You can now sync your data across all your devices seamlessly.
          </p>
        </div>
      </div>
    </div>
  );
};

export default Alert;

Dismissable Alert

An interactive alert designed to gently fade away when the user closes it.

"use client";

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

const Alert = () => {
  const [isVisible, setIsVisible] = useState(true);
  const dismissAlert = () => setIsVisible(false);

  useEffect(() => {
    if (!isVisible) {
      const timeoutId = setTimeout(() => {
        setIsVisible(true);
      }, 3000);
      return () => clearTimeout(timeoutId);
    }
  }, [isVisible]);

  return (
    <div className="max-w-md mx-auto sm:max-w-sm lg:max-w-lg">
      <div
        className={`relative bg-red-50/50 dark:bg-red-900/10 rounded-2xl border border-transparent dark:border-red-900/20 px-5 py-4 transition-all duration-300 ease-in-out origin-top ${
          isVisible ? "opacity-100 scale-100 mb-4" : "opacity-0 scale-95 h-0 overflow-hidden py-0 my-0 border-0"
        }`}
        role="alert"
      >
        <div className="flex items-start space-x-3 pr-8">
           <AlertTriangle className="w-5 h-5 text-red-500 dark:text-red-400 mt-0.5 flex-shrink-0" />
           <div>
              <p className="text-[15px] font-medium text-red-900 dark:text-red-100 mb-0.5">
                Connection Lost
              </p>
              <p className="text-[14px] text-red-700 dark:text-red-300/80 leading-relaxed">
                We're having trouble connecting to the server. Please check your internet.
              </p>
           </div>
        </div>
        <button
          className="absolute top-4 right-4 p-1.5 rounded-full text-red-500/70 dark:text-red-400/70 hover:bg-red-100 dark:hover:bg-red-900/30 hover:text-red-600 dark:hover:text-red-300 transition-colors duration-200"
          onClick={dismissAlert}
          aria-label="Dismiss alert"
        >
          <X className="h-4 w-4" />
        </button>
      </div>
    </div>
  );
};

export default Alert;

Custom Alert

A softly colored warning alert built for high-contrast clarity but a flat aesthetic.

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

const Alert = () => {
  return (
    <div
      className="bg-amber-50/50 dark:bg-amber-900/10 rounded-2xl border border-transparent dark:border-amber-900/20 px-5 py-4 max-w-md mx-auto sm:max-w-sm lg:max-w-lg transition-colors duration-300"
      role="alert"
    >
      <div className="flex items-start space-x-3">
        <CircleAlert className="w-5 h-5 text-amber-500 dark:text-amber-400 mt-0.5 flex-shrink-0" />
        <div className="flex-grow">
          <p className="text-[15px] font-medium text-amber-900 dark:text-amber-100 mb-0.5">
            Payment Method Expiring
          </p>
          <p className="text-[14px] text-amber-700 dark:text-amber-300/80 leading-relaxed">
            The credit card ending in 4242 will expire next month. Please update your billing info.
          </p>
        </div>
      </div>
    </div>
  );
};

export default Alert;

Floating Alert

A premium floating alert utilizing a soft shadow instead of an outline to provide a distinct z-index interaction.

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

const Alert = () => {
  return (
    <div
      className="fixed bottom-6 right-6 bg-white dark:bg-neutral-900 border border-neutral-100 dark:border-neutral-800 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.08)] dark:shadow-[0_8px_30px_rgb(0,0,0,0.2)] px-5 py-4 transform transition-all duration-500 ease-in-out hover:-translate-y-1"
      role="alert"
      aria-live="assertive"
    >
      <div className="flex items-center space-x-3">
        <CheckCircle className="h-5 w-5 text-emerald-500 dark:text-emerald-400 flex-shrink-0" />
        <div>
          <p className="text-[15px] font-medium text-neutral-900 dark:text-neutral-100 mb-0.5 mt-0.5">Profile Updated</p>
          <p className="text-[14px] text-neutral-500 dark:text-neutral-400">
            Your changes have been saved successfully.
          </p>
        </div>
      </div>
    </div>
  );
};

export default Alert;

Ghost Alert

A background-free, completely flat alert variant. Perfect for inline documentation and dense informational contexts.

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

const Alert = () => {
  return (
    <div
      className="bg-transparent rounded-2xl px-5 py-4 max-w-md mx-auto sm:max-w-sm lg:max-w-lg transition-colors duration-300 group hover:bg-neutral-50 dark:hover:bg-neutral-900/50"
      role="alert"
    >
      <div className="flex items-start space-x-3">
        <Info className="w-5 h-5 text-neutral-500 dark:text-neutral-400 mt-0.5 flex-shrink-0" />
        <div className="flex-grow">
          <p className="text-[15px] font-medium text-neutral-900 dark:text-neutral-100 mb-0.5">
            Did you know?
          </p>
          <p className="text-[14px] text-neutral-600 dark:text-neutral-400 leading-relaxed">
            You can use keyboard shortcuts to navigate through the app much faster.
          </p>
        </div>
      </div>
    </div>
  );
};

export default Alert;

Outline Alert

A completely unstyled, minimalist outline alert focusing entirely on the border and textual semantics.

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

const Alert = () => {
  return (
    <div
      className="bg-transparent border border-neutral-200 dark:border-neutral-800 rounded-2xl px-5 py-4 max-w-md mx-auto sm:max-w-sm lg:max-w-lg transition-colors duration-300"
      role="alert"
    >
      <div className="flex items-start space-x-3">
        <AlertTriangle className="w-5 h-5 text-neutral-500 dark:text-neutral-400 mt-0.5 flex-shrink-0" />
        <div className="flex-grow">
          <p className="text-[15px] font-medium text-neutral-900 dark:text-neutral-100 mb-0.5">
            Action Required
          </p>
          <p className="text-[14px] text-neutral-600 dark:text-neutral-400 leading-relaxed">
            Please complete your profile to access all premium features.
          </p>
        </div>
      </div>
    </div>
  );
};

export default Alert;
Previous
Accordion
Next
Avatar