FloatingNotification

A fully animated notification component that slides in from various positions with auto-close functionality and multiple types (success, error, warning, info).

Installation

Install using our CLI tool (recommended):

Terminal

npx mixcn-ui add floatingnotification

Import

Component.tsx

import { FloatingNotification } from "@components/customComponents/FloatingNotification";

Props

Name	Type	Default	Description
message	string	This is a notification message	The notification message to display
type	'success' \| 'error' \| 'warning' \| 'info'	info	The type of notification (affects color and icon)
duration	number	3000	Duration in milliseconds before auto-close
position	'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' \| 'top-center' \| 'bottom-center'	top-right	Position of the notification on screen
onClose	() => void	-	Callback function called when notification closes
autoClose	boolean	true	Whether the notification should auto-close
className	string	-	Additional CSS classes

Examples

Interactive Demo

Interactive Demo.tsx

import { useState } from "react";
import FloatingNotification from "@/components/uiComponents/FloatingNotification";

export default function Demo() {
  const [notifications, setNotifications] = useState([]);
  
  const addNotification = (type, position) => {
    const newNotification = {
      id: Date.now(),
      type,
      message: "Operation completed!",
      position,
    };
    setNotifications(prev => [...prev, newNotification]);
    
    setTimeout(() => {
      setNotifications(prev => prev.filter(n => n.id !== newNotification.id));
    }, 3000);
  };

  return (
    <div>
      <button onClick={() => addNotification("success", "top-right")}>
        Show Success
      </button>
      {notifications.map(notification => (
        <FloatingNotification key={notification.id} {...notification} />
      ))}
    </div>
  );
}