NotificationSystem

App

Page-level toast container with global `window.notify` / `window.pushNotification` API. 6 positions, 5 variants (success/warning/error/info/loading), auto-dismiss progress bar, hover to pause, manual dismiss.

Preview

Profile saved

Your changes are live.

New comment

Alex replied to your post.

Code

<%# Mount once near  %>
<%- include('modules/app/NotificationSystem', { position: 'top-right' }) %>

Preview

Upload failed

Network error. Please retry.

Syncing…

Updating 12 records.

Code

<%- include('modules/app/NotificationSystem', { position: 'bottom-left' }) %>

<%
  var _position  = locals.position  || 'top-right';
  var _className = locals.className || '';

  var positionMap = {
    'top-right':     'top-4 right-4 items-end',
    'top-left':      'top-4 left-4 items-start',
    'top-center':    'top-4 left-1/2 -translate-x-1/2 items-center',
    'bottom-right':  'bottom-4 right-4 items-end',
    'bottom-left':   'bottom-4 left-4 items-start',
    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2 items-center',
  };
  var posClass = positionMap[_position] || positionMap['top-right'];
%>

NotificationSystem

Top-right stack

Error + loading (bottom-left)