Sistema de Notificaciones modernas

Biblioteca ligera para mostrar modales y notificaciones con animaciones fluidas. Soporta contenido HTML, formularios, accesibilidad, múltiples botones de acción y personalización de animación.

Ver ejemplos Abrir playground

Documentación — Sistema de Notificaciones

Toasts →
🌓

Dark Mode Automático

Las notificaciones detectan automáticamente el tema activo en tu web y ajustan sus colores. Prueba cambiar el tema usando el botón de arriba y luego abre cualquier notificación.

🌞 Modo Claro

  • • Fondo blanco (#ffffff)
  • • Texto oscuro (#111827)
  • • Overlay suave

🌙 Modo Oscuro

  • • Fondo oscuro (#0f1724)
  • • Texto claro (#e6eef8)
  • • Overlay intenso
💡 Integración: Solo necesitas agregar/quitar la clase .dark al elemento <html>. Compatible con Tailwind CSS (darkMode: 'class') y frameworks personalizados.

⚡ Importar mediante CDN

📦 Script Clásico (UMD)

Compatible con cualquier proyecto HTML tradicional. ¡Solo necesitas un tag script! Todas las dependencias se cargan automáticamente. 

<!-- FerNotify (todo se carga automáticamente) -->
<script src="https://cdn.jsdelivr.net/gh/Fernandocabal/fernotify@latest/dist/notification-system.js"></script>

<script>
  notify.success('¡Todo funcionando!');
</script>

📦 ES Module

Para proyectos modernos con import/export. Las dependencias se cargan automáticamente. También puedes definir
"buttons" (array JSON) para diálogos con varios botones desde el playground.

<script type="module">
  import NotificationSystem from 'https://cdn.jsdelivr.net/gh/Fernandocabal/fernotify@latest/dist/notification-system.esm.js';
  
  window.notify = new NotificationSystem();
  notify.success('¡Funciona con ES Modules!');
</script>

📦 NPM

Para proyectos Node.js con bundler (Webpack, Vite, etc.)

npm install fernotify

import NotificationSystem from 'fernotify';
const notify = new NotificationSystem();
notify.success('¡Instalado vía npm!');

✅ Dependencias Automáticas:

  • • anime.js 3.2.1 - Se carga automáticamente desde CDN
  • • Boxicons 2.1.4 - Se carga automáticamente desde CDN

💡 Versionado: Puedes usar @latest para la última versión o especificar una versión exacta como @1.2.1

🍞 Toast — Notificaciones no bloqueantes

🔔

Los toasts son notificaciones ligeras que aparecen en la esquina de la pantalla sin bloquear la interfaz. Se cierran automáticamente (duración configurable), se pueden cerrar con el botón ×, y se acumulan apilándose uno bajo otro.

Métodos abreviados 

notify.toastSuccess('Guardado');
notify.toastError('Ocurrió un error');
notify.toastWarning('Revisa los datos');
notify.toastInfo('Nueva actualización');
notify.toastQuestion('¿Continuar?');

Opciones avanzadas 

notify.toast('Mensaje', {
  type: 'success',
  title: 'Título opcional',
  duration: 6000,  // ms (0 = sin auto-cierre)
  position: 'bottom-right'
});
Posiciones disponibles: top-right top-left top-center bottom-right bottom-left

Ejemplos — Notificaciones

Demostraciones de modales de notificación con uno o varios botones.

Playground — Notificaciones

Ejemplos — Toast

Notificaciones no bloqueantes, apilables y con pausa al pasar el mouse.

Playground — Toast