# colorlibhq/gentelella architecture

> Architecture diagram of the GitHub repository colorlibhq/gentelella, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/colorlibhq/gentelella
- Repository: https://github.com/colorlibhq/gentelella

## Overview

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: [`src/main-v4.js`](https://github.com/colorlibhq/gentelella/blob/master/src/main-v4.js) (Runtime entry), [`src/v4/toast.js`](https://github.com/colorlibhq/gentelella/blob/master/src/v4/toast.js) (Toast notifications), [`src/v4/modal.js`](https://github.com/colorlibhq/gentelella/blob/master/src/v4/modal.js) (Modal dialogs), [`src/v4/shell.js`](https://github.com/colorlibhq/gentelella/blob/master/src/v4/shell.js) (Dashboard shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Page Experience"]
  node_pages["Production pages"]
  node_dashboards["Dashboards and charts<br/>[charts.js]"]
  node_forms["Forms and controls<br/>[form-controls.js]"]
  node_tables["Interactive tables<br/>[tables.js]"]
  node_theme["Theme generator<br/>[theme.html]"]
  node_playground["Component playground<br/>[playground.html]"]
end

subgraph group_apps["Interactive Apps"]
  node_inbox["Inbox client<br/>[inbox.js]"]
  node_calendar["Calendar<br/>[calendar.js]"]
  node_kanban["Kanban<br/>[kanban.js]"]
  node_files["File manager<br/>[file-manager.js]"]
  node_details["Detail views<br/>[details.js]"]
  node_product_images["Product images<br/>[product-images.js]"]
  node_product_mockups["Product mockups<br/>[product-mockups.js]"]
end

subgraph group_runtime["Runtime Foundation"]
  node_entry["Runtime entry<br/>[main-v4.js]"]
  node_shell["Dashboard shell<br/>[shell.js]"]
  node_shell_render["Shell renderer<br/>[shell-render.js]"]
  node_shell_config["Navigation config<br/>[shell-config.js]"]
  node_data_adapter["Data adapter<br/>[data-adapter.js]"]
  node_service_worker["Offline worker<br/>[sw.js]"]
  node_menus["Menus and panels<br/>[menus.js]"]
  node_palette["Command palette<br/>[command-palette.js]"]
  node_page_actions["Page actions<br/>[page-actions.js]"]
  node_markup["Markup helpers<br/>[markup.js]"]
end

subgraph group_design["Design System"]
  node_settings["Settings<br/>[settings.js]"]
  node_styles["SCSS design system"]
  node_toast["Toast notifications<br/>[toast.js]"]
  node_modal["Modal dialogs<br/>[modal.js]"]
  node_highlight["Code highlighting<br/>[highlight.js]"]
end

node_user(("Dashboard user"))

node_user -->|"opens page"| node_pages
node_entry -->|"mounts shell"| node_shell
node_entry -->|"initializes charts"| node_dashboards
node_entry -->|"initializes tables"| node_tables
node_entry -->|"initializes palette"| node_palette
node_entry -->|"initializes actions"| node_page_actions
node_entry -->|"lazy loads"| node_settings
node_entry -->|"lazy loads"| node_forms
node_entry -->|"registers worker"| node_service_worker
node_shell -->|"renders shell"| node_shell_render
node_shell -->|"opens panels"| node_menus
node_shell -->|"reads navigation"| node_shell_config
node_inbox -->|"checks API mode"| node_data_adapter
node_inbox -->|"shows status"| node_toast
node_calendar -->|"shows status"| node_toast
node_calendar -->|"opens dialogs"| node_modal
node_files -->|"shows status"| node_toast
node_files -->|"opens dialogs"| node_modal
node_files -->|"opens menus"| node_menus
node_kanban -->|"shows status"| node_toast
node_kanban -->|"opens dialogs"| node_modal
node_palette -->|"reads links"| node_shell_config
node_palette -->|"shows status"| node_toast
node_palette -->|"opens dialogs"| node_modal
node_menus -->|"shows status"| node_toast
node_settings -->|"shows status"| node_toast
node_settings -->|"opens dialogs"| node_modal
node_pages -->|"includes demo"| node_theme
node_pages -->|"includes demo"| node_playground
node_entry -->|"loads styles"| node_styles

click node_pages "https://github.com/colorlibhq/gentelella/tree/master/production"
click node_dashboards "https://github.com/colorlibhq/gentelella/blob/master/src/v4/charts.js"
click node_forms "https://github.com/colorlibhq/gentelella/blob/master/src/v4/form-controls.js"
click node_tables "https://github.com/colorlibhq/gentelella/blob/master/src/v4/tables.js"
click node_theme "https://github.com/colorlibhq/gentelella/blob/master/production/theme.html"
click node_playground "https://github.com/colorlibhq/gentelella/blob/master/production/playground.html"
click node_inbox "https://github.com/colorlibhq/gentelella/blob/master/src/v4/inbox.js"
click node_calendar "https://github.com/colorlibhq/gentelella/blob/master/src/v4/calendar.js"
click node_kanban "https://github.com/colorlibhq/gentelella/blob/master/src/v4/kanban.js"
click node_files "https://github.com/colorlibhq/gentelella/blob/master/src/v4/file-manager.js"
click node_details "https://github.com/colorlibhq/gentelella/blob/master/src/v4/details.js"
click node_product_images "https://github.com/colorlibhq/gentelella/blob/master/src/v4/product-images.js"
click node_product_mockups "https://github.com/colorlibhq/gentelella/blob/master/src/v4/product-mockups.js"
click node_entry "https://github.com/colorlibhq/gentelella/blob/master/src/main-v4.js"
click node_shell "https://github.com/colorlibhq/gentelella/blob/master/src/v4/shell.js"
click node_shell_render "https://github.com/colorlibhq/gentelella/blob/master/src/v4/shell-render.js"
click node_shell_config "https://github.com/colorlibhq/gentelella/blob/master/src/v4/shell-config.js"
click node_data_adapter "https://github.com/colorlibhq/gentelella/blob/master/src/v4/data-adapter.js"
click node_service_worker "https://github.com/colorlibhq/gentelella/blob/master/public/sw.js"
click node_menus "https://github.com/colorlibhq/gentelella/blob/master/src/v4/menus.js"
click node_palette "https://github.com/colorlibhq/gentelella/blob/master/src/v4/command-palette.js"
click node_page_actions "https://github.com/colorlibhq/gentelella/blob/master/src/v4/page-actions.js"
click node_markup "https://github.com/colorlibhq/gentelella/blob/master/src/v4/markup.js"
click node_settings "https://github.com/colorlibhq/gentelella/blob/master/src/v4/settings.js"
click node_styles "https://github.com/colorlibhq/gentelella/tree/master/src/scss/v4"
click node_toast "https://github.com/colorlibhq/gentelella/blob/master/src/v4/toast.js"
click node_modal "https://github.com/colorlibhq/gentelella/blob/master/src/v4/modal.js"
click node_highlight "https://github.com/colorlibhq/gentelella/blob/master/src/v4/highlight.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_pages,node_dashboards,node_forms,node_tables,node_theme,node_playground,node_user toneBlue
class node_inbox,node_calendar,node_kanban,node_files,node_details,node_product_images,node_product_mockups toneAmber
class node_entry,node_shell,node_shell_render,node_shell_config,node_data_adapter,node_service_worker,node_menus,node_palette,node_page_actions,node_markup toneMint
class node_settings,node_styles,node_toast,node_modal,node_highlight toneRose
```

## Components

### Page Experience

- [Production pages](https://github.com/colorlibhq/gentelella/tree/master/production): `production`
- [Dashboards and charts](https://github.com/colorlibhq/gentelella/blob/master/src/v4/charts.js): `src/v4/charts.js`
- [Forms and controls](https://github.com/colorlibhq/gentelella/blob/master/src/v4/form-controls.js): `src/v4/form-controls.js`
- [Interactive tables](https://github.com/colorlibhq/gentelella/blob/master/src/v4/tables.js): `src/v4/tables.js`
- [Theme generator](https://github.com/colorlibhq/gentelella/blob/master/production/theme.html): `production/theme.html`
- [Component playground](https://github.com/colorlibhq/gentelella/blob/master/production/playground.html): `production/playground.html`

### Interactive Apps

- [Inbox client](https://github.com/colorlibhq/gentelella/blob/master/src/v4/inbox.js): `src/v4/inbox.js`
- [Calendar](https://github.com/colorlibhq/gentelella/blob/master/src/v4/calendar.js): `src/v4/calendar.js`
- [Kanban](https://github.com/colorlibhq/gentelella/blob/master/src/v4/kanban.js): `src/v4/kanban.js`
- [File manager](https://github.com/colorlibhq/gentelella/blob/master/src/v4/file-manager.js): `src/v4/file-manager.js`
- [Detail views](https://github.com/colorlibhq/gentelella/blob/master/src/v4/details.js): `src/v4/details.js`
- [Product images](https://github.com/colorlibhq/gentelella/blob/master/src/v4/product-images.js): `src/v4/product-images.js`
- [Product mockups](https://github.com/colorlibhq/gentelella/blob/master/src/v4/product-mockups.js): `src/v4/product-mockups.js`

### Runtime Foundation

- [Runtime entry](https://github.com/colorlibhq/gentelella/blob/master/src/main-v4.js): `src/main-v4.js`
- [Dashboard shell](https://github.com/colorlibhq/gentelella/blob/master/src/v4/shell.js): `src/v4/shell.js`
- [Shell renderer](https://github.com/colorlibhq/gentelella/blob/master/src/v4/shell-render.js): `src/v4/shell-render.js`
- [Navigation config](https://github.com/colorlibhq/gentelella/blob/master/src/v4/shell-config.js): `src/v4/shell-config.js`
- [Data adapter](https://github.com/colorlibhq/gentelella/blob/master/src/v4/data-adapter.js): `src/v4/data-adapter.js`
- [Offline worker](https://github.com/colorlibhq/gentelella/blob/master/public/sw.js): `public/sw.js`
- [Menus and panels](https://github.com/colorlibhq/gentelella/blob/master/src/v4/menus.js): `src/v4/menus.js`
- [Command palette](https://github.com/colorlibhq/gentelella/blob/master/src/v4/command-palette.js): `src/v4/command-palette.js`
- [Page actions](https://github.com/colorlibhq/gentelella/blob/master/src/v4/page-actions.js): `src/v4/page-actions.js`
- [Markup helpers](https://github.com/colorlibhq/gentelella/blob/master/src/v4/markup.js): `src/v4/markup.js`

### Design System

- [Settings](https://github.com/colorlibhq/gentelella/blob/master/src/v4/settings.js): `src/v4/settings.js`
- [SCSS design system](https://github.com/colorlibhq/gentelella/tree/master/src/scss/v4): `src/scss/v4`
- [Toast notifications](https://github.com/colorlibhq/gentelella/blob/master/src/v4/toast.js): `src/v4/toast.js`
- [Modal dialogs](https://github.com/colorlibhq/gentelella/blob/master/src/v4/modal.js): `src/v4/modal.js`
- [Code highlighting](https://github.com/colorlibhq/gentelella/blob/master/src/v4/highlight.js): `src/v4/highlight.js`

### Other components

- **Dashboard user**

## Connections

- Dashboard user → Production pages: opens page (evidence: `README.md`)
- Runtime entry → Dashboard shell: mounts shell (evidence: `src/main-v4.js`)
- Runtime entry → Dashboards and charts: initializes charts (evidence: `src/main-v4.js`)
- Runtime entry → Interactive tables: initializes tables (evidence: `src/main-v4.js`)
- Runtime entry → Command palette: initializes palette (evidence: `src/main-v4.js`)
- Runtime entry → Page actions: initializes actions (evidence: `src/main-v4.js`)
- Runtime entry → Settings: lazy loads (evidence: `src/main-v4.js`)
- Runtime entry → Forms and controls: lazy loads (evidence: `src/main-v4.js`)
- Runtime entry → Offline worker: registers worker (evidence: `src/main-v4.js`)
- Dashboard shell → Shell renderer: renders shell (evidence: `src/v4/shell.js`)
- Dashboard shell → Menus and panels: opens panels (evidence: `src/v4/shell.js`)
- Dashboard shell → Navigation config: reads navigation (evidence: `src/v4/shell.js`)
- Inbox client → Data adapter: checks API mode (evidence: `src/v4/inbox.js`)
- Inbox client → Toast notifications: shows status (evidence: `src/v4/inbox.js`)
- Calendar → Toast notifications: shows status (evidence: `src/v4/calendar.js`)
- Calendar → Modal dialogs: opens dialogs (evidence: `src/v4/calendar.js`)
- File manager → Toast notifications: shows status (evidence: `src/v4/file-manager.js`)
- File manager → Modal dialogs: opens dialogs (evidence: `src/v4/file-manager.js`)
- File manager → Menus and panels: opens menus (evidence: `src/v4/file-manager.js`)
- Kanban → Toast notifications: shows status (evidence: `src/v4/kanban.js`)
- Kanban → Modal dialogs: opens dialogs (evidence: `src/v4/kanban.js`)
- Command palette → Navigation config: reads links (evidence: `src/v4/command-palette.js`)
- Command palette → Toast notifications: shows status (evidence: `src/v4/command-palette.js`)
- Command palette → Modal dialogs: opens dialogs (evidence: `src/v4/command-palette.js`)
- Menus and panels → Toast notifications: shows status (evidence: `src/v4/menus.js`)
- Settings → Toast notifications: shows status (evidence: `src/v4/settings.js`)
- Settings → Modal dialogs: opens dialogs (evidence: `src/v4/settings.js`)
- Production pages → Theme generator: includes demo (evidence: `README.md`)
- Production pages → Component playground: includes demo (evidence: `README.md`)
- Runtime entry → SCSS design system: loads styles (evidence: `src/main-v4.js`)