gentelella

Gentelella v4 es una plantilla de panel de administración gratuita y de código abierto mantenida por Colorlib. Se trata de una reescritura completa del proyecto Gentelella, sustituyendo el antiguo stack de Bootstrap y jQuery por JavaScript vanilla, SCSS y el sistema de construcción Vite 8. El README la posiciona como una alternativa para paneles de SaaS, backends de CRM/ERP, paneles de administración internos, herramientas de gestión de proyectos, backends de comercio electrónico, paneles de análisis e interfaces de gestión de contenidos o reservas. El paquete incluye 58 páginas HTML listas para producción, tratadas como una aplicación Vite de múltiples páginas con puntos de entrada autodescubiertos. Las superficies incluidas abarcan cuatro variantes de panel (operaciones, análisis, ventas, salud del sistema), pantallas de autenticación (inicio de sesión con opciones sociales de Google/GitHub, registro, recuperación de contraseña, 2FA, pantalla de bloqueo, además de páginas de error 403/404/500), formularios (generales, controles avanzados, un asistente de seis pasos, carga drag-and-drop, validación, selector de rango de fechas, selección múltiple, editor de texto enriquecido) y páginas de DataTables con ordenación, búsqueda, paginación, selección de filas y exportación a CSV. Los gráficos son gestionados por Apache ECharts 6, importados de forma perezosa y modular, con 20 variantes documentadas como líneas, áreas, áreas apiladas, barras, barras horizontales, barras/líneas mixtas, donas, sectores, radar, indicadores, dispersión, mapas de calor, embudos, velas, barras polares, treemaps, sankey, mapas de calor de calendario y gantt. Las páginas de aplicación incluyen un calendario con CRUD, un cliente de bandeja de entrada con carpetas, panel de lectura, modal de redacción, responder/reenviar y atajos de teclado J/K/R/S/#, una vista de chat, un tablero kanban de arrastrar y soltar, un gestor de archivos de árbol más cuadrícula, notificaciones, una factura con partidas editables, perfil, ajustes persistidos en localStorage y una página de preguntas frecuentes. Páginas de comercio electrónico y administración completan el conjunto. Entre las herramientas integradas destacan un generador de temas en vivo que redefine el estilo de gráficos, botones, insignias y enlaces en tiempo real y puede exportar los tokens SCSS resultantes, un "playground" de componentes que empareja cada componente reutilizable con su HTML exacto y un botón de copia, y una paleta de comandos para búsqueda difusa en las 58 páginas. El sistema de temas admite modo claro y oscuro con detección de prefers-color-scheme y un script de pre-pintado para evitar el destello de tema incorrecto; los cambios manuales persisten en localStorage. Los diseños RTL para árabe, hebreo y persa se admiten mediante el atributo dir de html y propiedades lógicas de CSS en lugar de una hoja de estilos espejada independiente. Las mejoras de accesibilidad incluyen un enlace de salto, anillos de enfoque, etiquetas ARIA en controles interactivos, puntos de referencia semánticos y tablas compatibles con lectores de pantalla. La plantilla también está preparada para PWA con un service worker, shell offline y un manifiesto instalable. La navegación se gestiona desde un único array NAV, la shell puede inyectarse en tiempo de compilación y ejecución sin destellos de contenido sin estilo, el comportamiento de la barra lateral cubre tanto un cajón móvil como un riel de solo iconos para escritorio con submenús desplegables, y las etiquetas de meta descripción, Open Graph y Twitter Card por página se inyectan en tiempo de compilación. Los tokens de diseño residen como propiedades personalizadas de CSS, por lo que el cambio del color primario se propaga a los gráficos y elementos de la interfaz. El stack es deliberadamente pequeño: tres dependencias de producción y diez de desarrollo, con node_modules de unos 165 MB frente a los aproximadamente 600 MB de la versión anterior. Además de ECharts, utiliza DataTables.net 3 rediseñado según el sistema de diseño y Leaflet 1.9 para un mapa de clientes cargado solo en esa página, además de la fuente Inter. Playwright es una dependencia de desarrollo utilizada para un flujo de capturas de pantalla y pruebas de humo que solicitan cada página y verifican el HTTP 200. Los desarrolladores disponen de un conjunto de scripts de npm para servidor de desarrollo, compilaciones de producción y no minificadas, vista previa, análisis de paquetes, andamiaje de páginas mediante un generador que puede insertar entradas en la barra lateral, captura de pantallas, despliegue con encabezados de caché por archivo, linting y formateo. Una variable BASE_PATH permite el despliegue bajo una subruta, y la salida de la compilación es HTML estático más activos con hash aptos para cualquier host estático. El proyecto también se publica en npm para importaciones granulares de ayudantes de shell, modal y toast con exportaciones de subrutas para módulos, estilos y declaraciones de TypeScript, y el dist precompilado más el src sin empaquetar son accesibles a través de jsDelivr para prototipado o inspección de páginas de demostración. Se proporcionan archivos de ayuda para Claude Code, Cursor, GitHub Copilot y asistentes compatibles con agents.md, documentando convenciones y recetas. La documentación completa se aloja por separado, cubriendo configuración, estructura, arquitectura, temas, tablas, formularios, superposiciones, PWA, despliegue y migración. Tiene licencia MIT y es gratuita para uso personal y comercial.