Back to all components

Notifications

Animated notification system with multiple types and positions

Notifications

A flexible, animated notification system for React with support for multiple types, positions, and smooth transitions. Easily display success, error, info, or warning messages anywhere in your app.

Features

  • Multiple types: success, error, info, warning, and neutral
  • Smooth enter/exit animations (Framer Motion)
  • Customizable position (top/bottom, left/center/right)
  • Auto-dismiss with custom duration or persistent
  • Stack management (max notifications)
  • Accessible and responsive

Installation

npm install motion/react lucide-react clsx

Basic Usage

import {
  useNotifications,
  NotificationContainer,
} from "@/components/notification";


function MyComponent() {
  const {
    notifications,
    addNotification,
    removeNotification,
    clearAll,
    position,
  } = useNotifications({
    position: "top-right",
    maxNotifications: 4,
    defaultDuration: 2000,
  });


  return (
    <>
      <button
        onClick={() =>
          addNotification({
            type: "success",
            title: "Success!",
            message: "Saved successfully.",
          })
        }
      >
        Show Success
      </button>
      <button onClick={clearAll}>Clear All</button>
      <NotificationContainer
        notifications={notifications}
        onRemove={removeNotification}
        position={position}
      />
    </>
  );
}

Props

PropTypeDefaultDescription
notificationsNotification[]-Array of notification objects
addNotification(notification: Omit<Notification, 'id'>) => string-Add a new notification
removeNotification(id: string) => void-Remove a notification by id
clearAll() => void-Remove all notifications
position"top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center""top-right"Position of the notification stack

Examples

Different Types

addNotification({ type: "success", title: "Success!", message: "Saved." });
addNotification({
  type: "error",
  title: "Error!",
  message: "Something failed.",
});
addNotification({
  type: "warning",
  title: "Warning!",
  message: "This can't be undone.",
  persistent: true,
});
addNotification({
  type: "info",
  title: "Info",
  message: "New update available.",
});
addNotification({ title: "Neutral", message: "FYI message only." });

Custom Duration

addNotification({
  type: "success",
  title: "Quick",
  message: "Short duration.",
  duration: 1000,
});

Persistent Notification

addNotification({
  type: "warning",
  title: "Warning",
  message: "Stays until closed.",
  persistent: true,
});

Clear All

clearAll();

Different Positions

useNotifications({ position: "bottom-center" });

Best Practices

  1. Use short durations for success/info, longer for warnings/errors
  2. Keep messages concise and actionable
  3. Use consistent positioning throughout your app
  4. Ensure notifications are accessible (screen readers, keyboard)
  5. Test on mobile for responsiveness

Accessibility

  • Proper ARIA labels for screen readers
  • Keyboard navigation for close buttons
  • Announcements for new notifications
PreviousMorphing Modal
NextParallax Card