gentelella

Gentelella v4 é um template de dashboard administrativo gratuito e de código aberto mantido pela Colorlib. É uma reescrita completa do projeto Gentelella de longa data, substituindo a antiga pilha Bootstrap e jQuery por JavaScript vanilla, SCSS e o sistema de build Vite 8. O README o posiciona como uma alternativa para dashboards de SaaS, backends de CRM/ERP, painéis administrativos internos, ferramentas de gestão de projetos, backends de e-commerce, dashboards de análise e interfaces de reserva ou gestão de conteúdo. O pacote inclui 58 páginas HTML prontas para produção, tratadas como um app Vite de múltiplas páginas com pontos de entrada auto-descobertos. As superfícies incluídas abrangem quatro variantes de dashboard (operações, análise, vendas, saúde do sistema), telas de autenticação (login com opções sociais do Google/GitHub, registro, esqueci a senha, 2FA, tela de bloqueio, além de páginas de erro 403/404/500), formulários (gerais, controles avançados, um assistente de seis etapas, upload drag-and-drop, validação, seletor de intervalo de datas, multi-seleção, editor de texto rico) e páginas de DataTables com ordenação, busca, paginação, seleção de linhas e exportação para CSV. Os gráficos são gerenciados pelo Apache ECharts 6, importados de forma preguiçosa (lazy) e modular, com 20 variantes documentadas, como linha, área, área empilhada, barra, barra horizontal, barra/linha mista, donut, pizza, radar, medidor, dispersão, mapa de calor, funil, candlestick, barra polar, treemap, sankey, mapa de calor de calendário e gantt. As páginas de aplicação incluem um calendário com CRUD, um cliente de caixa de entrada com pastas, painel de leitura, modal de composição, responder/encaminhar e atalhos de teclado J/K/R/S/#, uma visualização de chat, um quadro kanban drag-and-drop, um gerenciador de arquivos árvore-mais-grade, notificações, uma fatura com itens de linha editáveis, perfil, configurações persistidas no localStorage e uma página de FAQ. Páginas de e-commerce e administração completam o conjunto. Ferramentas integradas notáveis incluem um gerador de temas ao vivo que estiliza gráficos, botões, emblemas e links em tempo real e pode exportar os tokens SCSS resultantes, um playground de componentes que combina cada componente reutilizável com seu HTML exato e um botão de cópia, e uma paleta de comandos para busca fuzzy em todas as 58 páginas. A tematização suporta modo claro e escuro com detecção de prefers-color-scheme e um script de pré-pintura para evitar o flash de tema incorreto, e as alternâncias manuais persistem no localStorage. Layouts RTL para árabe, hebraico e persa são suportados através do atributo dir do html e propriedades lógicas de CSS, em vez de uma folha de estilo espelhada separada. Toques de acessibilidade incluem skip-link, anéis de foco, rótulos ARIA em controles interativos, marcos semânticos e tabelas amigáveis para leitores de tela. O template também está pronto para PWA com um service worker, shell offline e um manifesto instalável. A navegação é conduzida a partir de um único array NAV, o shell pode ser injetado no momento do build e em tempo de execução sem flash de conteúdo não estilizado, o comportamento da barra lateral cobre tanto uma gaveta móvel quanto um trilho apenas de ícones para desktop com submenus flyout, e as tags de meta descrição, Open Graph e Twitter Card por página são injetadas no build. Os tokens de design residem como propriedades personalizadas de CSS, portanto, a alteração da cor primária se propaga para gráficos e elementos da UI. A pilha é deliberadamente pequena: três dependências de produção e dez dependências de desenvolvimento, com node_modules em torno de 165 MB em comparação com aproximadamente 600 MB na versão anterior. Além do ECharts, utiliza DataTables.net 3 redesenhada para o sistema de design e Leaflet 1.9 para um mapa de clientes carregado apenas naquela página, além da fonte Inter. O Playwright é uma dependência de desenvolvimento usada para um pipeline de capturas de tela e testes de fumaça que solicitam cada página e afirmam HTTP 200. Os desenvolvedores recebem um conjunto de scripts npm para servidor de dev, builds de produção e não minificados, preview, análise de bundle, andaime de páginas via um gerador que pode inserir entradas na barra lateral, captura de tela, implantação com cabeçalhos de cache por arquivo, linting e formatação. Uma variável BASE_PATH suporta a implantação sob um subcaminho, e a saída do build é HTML estático mais ativos com hash adequados para qualquer host estático. O projeto também é publicado no npm para importações granulares de helpers de shell, modal e toast com exportações de subcaminho para módulos, estilos e declarações TypeScript, e o dist pré-compilado mais o src não empacotado estão acessíveis via jsDelivr para prototipagem ou inspeção de páginas de demonstração diretamente. Arquivos auxiliares são fornecidos para Claude Code, Cursor, GitHub Copilot e assistentes compatíveis com agents.md, documentando convenções e receitas. A documentação completa é hospedada separadamente, cobrindo configuração, estrutura, arquitetura, tematização, tabelas, formulários, overlays, PWA, implantação e migração. Possui licença MIT e é gratuito para uso pessoal e comercial.