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

🌓

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

Ejemplos

Incluye demostraciones de notificaciones con uno o varios botones (use el playground para probar buttons).

Playground