@revoui/alert

A collection of versatile and customizable Alert and Notification components for React applications, part of the main Revo UI library.

These components are built on a single, flexible base component (MyAlert) and provide simplified wrappers for common alert types, making it easy to implement both static and dynamic alerts in your projects.

📦 Installation

Install the package via npm:

npm install @revoui/alert

🚀 Usage

The library provides five main exported components:

• Four pre-configured wrappers (static usage).
• One controller component (Alert) for dynamic, state-managed notifications.

1. Pre-configured Wrappers (Static Usage)

Use the wrappers (SuccessAlert, WarningAlert, ErrorAlert, etc.) for quick, self-contained alerts.

import { SuccessAlert, WarningAlert, ErrorAlert } from '@revoui/alert';

export default function StaticAlertExample() {
  return (
    <div className="space-y-4 p-6">
      <SuccessAlert
        title="Configuration Saved"
        message="Your new preferences have been successfully stored."
        shadow="lg"
      />
      <WarningAlert
        title="Check Required"
        message="A payment transaction is pending and requires immediate attention."
        rounded="xl"
      />
      <ErrorAlert
        title="Critical Failure"
        message="The server failed to respond due to a permissions issue."
        className="border border-red-300"
      />
    </div>
  );
}

2. Dynamic Controller (Alert)

Use the Alert component for state-controlled alerts, ideal for notifications triggered by user actions or async operations.

import React, { useState } from 'react';
import { Alert, AlertProps } from '@revoui/alert';

type DynamicAlertState = Omit<AlertProps, 'message'> & {
  message?: string;
  type?: MyAlertProps['type'];
};

export default function DynamicAlertExample() {
  const [alertState, setAlertState] = useState<DynamicAlertState>({ message: '' });

  const showSuccessAlert = () => {
    setAlertState({
      type: "success",
      title: "Action Complete",
      message: "Data synchronization finished successfully.",
    });
    setTimeout(() => setAlertState({ message: '' }), 4000);
  };

  return (
    <div>
      <Alert alertState={alertState} setAlert={setAlertState} />
      <button onClick={showSuccessAlert}>
        Show Dynamic Success Alert
      </button>
    </div>
  );
}

🎨 Alert Types and Defaults

The type prop (or wrapper used) determines default colors and icons.

| Type | Wrapper | Icon Color | Background Color | Purpose | | -------- | ------------- | ----------- | ---------------- | --------------------------- | | success | SuccessAlert | green-500 | green-100 | Positive confirmation. | | danger | ErrorAlert | red-500 | red-100 | Critical failure/error. | | required | RequiredAlert | red-500 | red-100 | Strong emphasis/validation. | | warning | WarningAlert | amber-500 | amber-100 | Non-critical advisory. | | info | - | blue-500 | blue-100 | Neutral information. | | default | - | gray-500 | gray-100 | Generic notification. |

🧩 Components

| Component | Description | | ------------ | -------------------------------------------------------------------------------------- | | MyAlert | The core display component. Renders the icon, title, and message. | | Alert | The controller component. Uses alertState + setAlert to render alerts dynamically. | | Wrappers | Pre-configured: SuccessAlert, ErrorAlert, WarningAlert, RequiredAlert. |

⚙️ Props

AlertProps (Wrappers)

Props available in all pre-configured alerts:

| Prop | Type | Default | Description | | ----------- | --------------------- | ------- | ---------------------------- | | message | string \| ReactNode | – | Alert content. | | title | string | – | Optional header text. | | className | string | – | Custom Tailwind classes. | | color | string | white | Overrides background color. | | shadow | string | – | Tailwind shadow (e.g. md). | | rounded | string | lg | Border radius style. | | textColor | string | – | Override text color. | | iconColor | string | – | Override icon color. | | iconBg | string | – | Override icon background. | | iconRound | string | full | Border radius for icon. |

MyAlertProps (Base Component)

Extends AlertProps with an explicit type:

| Prop | Type | Default | Description | | ------ | ----------- | --------- | ------------------------------------------------------------------------------------ | | type | AlertType | warning | Defines alert style (success, info, danger, required, warning, default). |

🔧 Customization

Easily override defaults with iconColor, iconBg, and textColor.

<RequiredAlert 
  title="Custom Branding" 
  message="This alert uses custom purple styling."
  iconColor="purple-600"
  iconBg="purple-100"
  textColor="purple-800"
/>

📄 License

Licensed under the MIT License.

👥 Author

Revoui Team