How colorlibhq/gentelella works
Gentelella v4 is a vanilla-JavaScript admin dashboard template: users open one of its production HTML pages and interact with dashboard, business-app, and UI-demo surfaces. The runtime entry mounts the shared shell and initializes dashboard features, with page-specific modules loaded where needed. The README documents broader page and PWA capabilities; some page-to-module wiring is not shown in the excerpts, so uncertain relationships are omitted. The sample inbox adapter is included, but no persistent application database is evidenced.
Main entry points: main-v4.js Runtime entry · toast.js Toast notifications · modal.js Modal dialogs · shell.js Dashboard shell
Components 29
Page Experience
- Production pages
production - Dashboards and charts
src/v4/charts.js - Forms and controls
src/v4/form-controls.js - Interactive tables
src/v4/tables.js - Theme generator
production/theme.html - Component playground
production/playground.html
Interactive Apps
- Inbox client
src/v4/inbox.js - Calendar
src/v4/calendar.js - Kanban
src/v4/kanban.js - File manager
src/v4/file-manager.js - Detail views
src/v4/details.js - Product images
src/v4/product-images.js - Product mockups
src/v4/product-mockups.js
Runtime Foundation
- Runtime entry
src/main-v4.js - Dashboard shell
src/v4/shell.js - Shell renderer
src/v4/shell-render.js - Navigation config
src/v4/shell-config.js - Data adapter
src/v4/data-adapter.js - Offline worker
public/sw.js - Menus and panels
src/v4/menus.js - Command palette
src/v4/command-palette.js - Page actions
src/v4/page-actions.js - Markup helpers
src/v4/markup.js
Design System
- Settings
src/v4/settings.js - SCSS design system
src/scss/v4 - Toast notifications
src/v4/toast.js - Modal dialogs
src/v4/modal.js - Code highlighting
src/v4/highlight.js
Other components
- Dashboard user
Connections 30
- Dashboard user → Production pages: opens page
README.md - Runtime entry → Dashboard shell: mounts shell
src/main-v4.js - Runtime entry → Dashboards and charts: initializes charts
src/main-v4.js - Runtime entry → Interactive tables: initializes tables
src/main-v4.js - Runtime entry → Command palette: initializes palette
src/main-v4.js - Runtime entry → Page actions: initializes actions
src/main-v4.js - Runtime entry → Settings: lazy loads
src/main-v4.js - Runtime entry → Forms and controls: lazy loads
src/main-v4.js - Runtime entry → Offline worker: registers worker
src/main-v4.js - Dashboard shell → Shell renderer: renders shell
src/v4/shell.js - Dashboard shell → Menus and panels: opens panels
src/v4/shell.js - Dashboard shell → Navigation config: reads navigation
src/v4/shell.js - Inbox client → Data adapter: checks API mode
src/v4/inbox.js - Inbox client → Toast notifications: shows status
src/v4/inbox.js - Calendar → Toast notifications: shows status
src/v4/calendar.js - Calendar → Modal dialogs: opens dialogs
src/v4/calendar.js - File manager → Toast notifications: shows status
src/v4/file-manager.js - File manager → Modal dialogs: opens dialogs
src/v4/file-manager.js - File manager → Menus and panels: opens menus
src/v4/file-manager.js - Kanban → Toast notifications: shows status
src/v4/kanban.js - Kanban → Modal dialogs: opens dialogs
src/v4/kanban.js - Command palette → Navigation config: reads links
src/v4/command-palette.js - Command palette → Toast notifications: shows status
src/v4/command-palette.js - Command palette → Modal dialogs: opens dialogs
src/v4/command-palette.js - Menus and panels → Toast notifications: shows status
src/v4/menus.js - Settings → Toast notifications: shows status
src/v4/settings.js - Settings → Modal dialogs: opens dialogs
src/v4/settings.js - Production pages → Theme generator: includes demo
README.md - Production pages → Component playground: includes demo
README.md - Runtime entry → SCSS design system: loads styles
src/main-v4.js