Skip to content

Releases: ColorlibHQ/gentelella

v4.1.1 β€” Linked breadcrumbs, DataTables 3, footer fix (first 4.1.x on npm)

Choose a tag to compare

@puikinsh puikinsh released this 07 Aug 11:43

Everything in v4.1.0 plus one link fix. v4.1.0 was tagged here but never published to npm β€” gentelella@4.1.1 is the first 4.1.x on the registry, so install that.

Fixed since 4.1.0

  • The landing page's changelog link 404'd. It pointed at blob/master/CHANGELOG.md; the file is changelog.md and GitHub blob URLs are case-sensitive. The same mistake was in the docs site footer, fixed separately at https://gentelella.colorlib.com/docs/.

Highlights from 4.1.0

  • Linked breadcrumbs (#999) β€” every segment except the current page becomes a link when it has somewhere to go. Explicit Label|href.html targets, automatic matching against sidebar entries, plain text when neither applies. Rendered at build time, so they work with JavaScript disabled.
  • DataTables 2 β†’ 3. No migration needed if you use the template's table wrapper β€” the API surface and generated markup are unchanged, verified against a 2.3.8 baseline.
  • Admin footer corrected β€” it no longer calls v4 a Bootstrap template, and the version is read from package.json instead of the hand-written v4.0 Concept Β· 2026.
  • brace-expansion β†’ 5.0.9, clearing two new high-severity DoS advisories.

Full changelog: https://github.com/ColorlibHQ/gentelella/blob/master/changelog.md

v4.1.0 β€” Linked breadcrumbs, DataTables 3, footer fix

Choose a tag to compare

@puikinsh puikinsh released this 06 Aug 12:37

Breadcrumbs become navigable, plus a dependency refresh that includes the DataTables 3 major and a footer correction.

Added

  • Linked breadcrumbs (#999) β€” every segment except the current page is now a link when it has somewhere to go. Three resolution tiers, in order:

    1. Explicit target β€” data-breadcrumb="Home > Projects|projects.html > Acme Redesign"; everything after | is the href.
    2. NAV label match β€” a segment whose text matches a sidebar entry links to it automatically; a parent group resolves to its first child. Derived from NAV at module load, so the two can't drift.
    3. Neither β€” plain text, byte-identical to the previous output.

    The last segment stays aria-current="page" and is never a link. Links are emitted by the build-time shell injector, so they're in the served HTML on the first frame, work with JavaScript disabled, and never hydrate in after paint. No visual change at rest β€” crumb links inherit --text-muted and pick up --primary plus an underline on hover.

Fixed

  • Breadcrumb truncation in build-time shell injection β€” the plugin's /<body\b([^>]*)>/ stopped at the literal > inside data-breadcrumb="Home > Dashboard", so all 58 pages shipped a bare "Home". Now quote-aware.
  • Admin footer no longer claims to be a Bootstrap template. It read "A free Bootstrap admin template" on all 46 shell pages, contradicting v4's premise. Now "free admin dashboard template by Colorlib".
  • Footer version no longer drifts. The hand-written v4.0 Concept Β· 2026 is now v4.1.0 Β· MIT, with the version imported from package.json at build time so a release bump carries through automatically.

Changed

  • Breadcrumb trails rewritten on 12 pages so no trail contains a dead level. Apps, Layouts, Admin, UI, Shop and E-commerce are sidebar groupings with no landing page, so Home > Apps > Kanban is now Home > Kanban. 61 of 63 non-current segments across the 46 shell pages resolve to a link.
  • datatables.net 2.3.8 β†’ 3.0.1 (major). The 2β†’3 upgrade notes aren't published yet, so this was verified empirically against a 2.3.8 baseline: our API surface (new DataTable, columns().every(), rows({search,order}).indexes(), row(i).node()) is unchanged, the markup _datatable.scss re-skins is identical, both table pages render pixel-identically in light and dark with no console errors, and CSV export still honours the applied sort and filter. No migration needed if you use the template's own table wrapper.
  • Dev dependencies bumped to latest:
    • @playwright/test, playwright: 1.61.1 β†’ 1.62.1
    • eslint: 10.7.0 β†’ 10.8.0
    • sass: 1.101.3 β†’ 1.102.0
    • terser: 5.49.0 β†’ 5.49.2
    • vite: 8.1.5 β†’ 8.2.0
  • ESLint ecmaVersion 2022 β†’ 2025 for import attributes. Emitted code is unchanged β€” build.target still pins ES2022.
  • echarts 6.1.0, leaflet 1.9.4, prettier 3.9.6, @eslint/js, eslint-config-prettier and rollup-plugin-visualizer were already at their latest published versions.

Security

  • brace-expansion 5.0.7 β†’ 5.0.9 (transitive, via eslint β†’ minimatch) clears two new high-severity DoS advisories affecting < 5.0.9: GHSA-mh99-v99m-4gvg (unbounded expansion length β†’ OOM crash) and GHSA-rgw5-rvv9-x895 (unbounded intermediate arrays, bypassing the mitigation 5.0.7 introduced). npm audit reports 0 vulnerabilities.

Verified: eslint src/ clean, build 5.2 s with an unchanged chunk layout, npm run smoke passes all 58 pages.

Full changelog: https://github.com/ColorlibHQ/gentelella/blob/master/changelog.md

v4.0.3 β€” Dependency refresh

Choose a tag to compare

@puikinsh puikinsh released this 21 Jul 15:03

Dependency refresh. Toolchain bumps to latest minor/patch; no source or API changes. Build verified (~8 s, identical chunk layout), eslint src/ clean, npm audit reports 0 vulnerabilities.

Security

  • brace-expansion 5.0.6 β†’ 5.0.7 resolves Dependabot alert #85 β€” a high-severity DoS (exponential-time expansion of consecutive non-expanding {} groups) affecting brace-expansion < 5.0.7. This is the bump Dependabot proposed in #996, folded into the lockfile refresh.

Changed

  • Dev dependencies bumped to latest:
    • @playwright/test, playwright: 1.61.0 β†’ 1.61.1
    • eslint: 10.5.0 β†’ 10.7.0
    • prettier: 3.8.4 β†’ 3.9.6
    • sass: 1.101.0 β†’ 1.101.3
    • terser: 5.48.0 β†’ 5.49.0
    • vite: 8.0.16 β†’ 8.1.5
  • Runtime dependencies (datatables.net 2.3.8, echarts 6.1.0, leaflet 1.9.4) and the remaining dev deps (@eslint/js 10.0.1, eslint-config-prettier 10.1.8, rollup-plugin-visualizer 7.0.1) were already at their latest published versions β€” no change.

Full changelog: https://github.com/ColorlibHQ/gentelella/blob/master/changelog.md

v4.0.2 β€” Dependency refresh

Choose a tag to compare

@puikinsh puikinsh released this 17 Jun 12:36

Dependency refresh. Toolchain bumped to latest minor/patch; no source or API changes. Build verified, eslint src/ clean, npm audit reports 0 vulnerabilities.

Changed

Dev dependencies bumped to latest:

Package From To
@playwright/test, playwright 1.60.0 1.61.0
eslint 10.4.0 10.5.0
prettier 3.8.3 3.8.4
sass 1.99.0 1.101.0
terser 5.47.1 5.48.0
vite 8.0.13 8.0.16

Runtime dependencies (datatables.net 2.3.8, echarts 6.1.0, leaflet 1.9.4) and the remaining dev deps were already at their latest published versions.

Changelog: also backfilled the previously-unlogged 4.0.0 and 4.0.1 releases.

Full changelog: https://github.com/ColorlibHQ/gentelella/blob/master/changelog.md

v4.0.1 β€” npm dist/ + docs migration + UI fixes

Choose a tag to compare

@puikinsh puikinsh released this 11 Jun 13:09

First patch release on the v4 line. Same template, much more polish.

npm + jsDelivr CDN

  • The npm tarball now ships the pre-built `dist/` (it was source-only in 4.0.0), so every file is reachable on jsDelivr without a bundler.
  • New `prepublishOnly` hook rebuilds `dist/` automatically before every publish β€” no chance of shipping a stale build.
  • README now has a CDN (jsDelivr) section with working snippets β€” pull individual `src/v4/` ES modules or render the built `dist/production/.html` demo pages straight from CDN.
  • README badge row added β€” live npm version, weekly downloads, jsDelivr CDN hits, GitHub stars.

Docs

  • Local `/docs/*.md` retired in favor of gentelella.colorlib.com/docs/ as the single source of truth. The 18 .md files in the repo are now short redirect stubs pointing at the live URLs, so old deep-links stay graceful.
  • New prominent `Docs` button in the topbar shell, visible on every page β€” opens the live docs site in a new tab.

UI fixes

  • `#985` β€” dropzone on `form_upload.html` no longer collapses; content is centered both axes with a 200px min-height.
  • `#986` β€” button group active border now renders fully on every position (was only working on `:last-child`). Added radio-style click-to-toggle on `.btn-group[data-group]` with `aria-pressed` flips.

Other

  • `#984` β€” bumped `qs` in `examples/express-sqlite` to resolve a moderate-severity DoS advisory.
  • README screenshots are now clickable β€” every preview image links to its matching page on `preview.colorlib.com`.

Install

```bash
npm install gentelella@4.0.1
```

Or pull from CDN:
```text
https://cdn.jsdelivr.net/npm/gentelella@4/dist/production/index.html
```

v4.0.0

Choose a tag to compare

@puikinsh puikinsh released this 21 May 08:24

Gentelella v4 is a ground-up redesign of the free admin dashboard template β€” vanilla JavaScript, no Bootstrap, no jQuery, no SPA framework. Built on Vite 8 with SCSS.

Live demo: https://preview.colorlib.com/theme/gentelella/

Highlights

  • 58 production-ready HTML pages β€” dashboards, auth, forms, tables, charts, apps (inbox / kanban / calendar / file manager), e-commerce, admin, layouts.
  • 20 ECharts variants β€” line, area, bar, radar, gauge, scatter, heatmap, funnel, candlestick, treemap, sankey, calendar heatmap, gantt, polar bar, and more. Lazy-loaded per page.
  • Live theme generator β€” pick a primary color, watch every chart, button, badge, and active state restyle in real time. Copy or download the generated SCSS tokens.
  • Component playground β€” every reusable component on one page with its exact HTML and a Copy button.
  • ⌘K command palette β€” fuzzy search across all 58 pages and inline actions.
  • Interactive inbox with folders, reader pane, compose, reply/forward, J/K/R/S/# keyboard shortcuts.
  • Drag-and-drop kanban, month-grid calendar with CRUD, file manager with tree + grid, localStorage-backed settings.
  • Dark mode with prefers-color-scheme + pre-paint script (no flash).
  • PWA β€” installable on macOS / Windows / iOS / Android, offline shell, service worker.
  • Sidebar rail mode β€” desktop hamburger collapses to icon-only with hover tooltips.

Tech stack

  • Vite 8 with Rolldown β€” multi-page app, 58 auto-discovered entry points
  • Vanilla ES2022, SCSS with @use modules
  • Apache ECharts 6, DataTables.net 2, Leaflet 1.9 β€” all lazy-imported per page
  • 3 production deps, 9 dev deps, ~178 MB node_modules (down from ~600 MB on v2)

AI-assisted development

Ships with helper files for Claude Code (CLAUDE.md), Cursor (.cursor/rules/project.mdc), GitHub Copilot (.github/copilot-instructions.md), and any agents.md tool (AGENTS.md).

Documentation

Comprehensive guide in docs/ β€” getting started, architecture, theming, pages, components, charts, tables, forms, overlays, command palette, app modules, PWA, deployment, TypeScript, data adapter, migration from v2, FAQ.

Migration from v2

See docs/migration-v2.md for the porting checklist. v4 is a rewrite, not a refactor β€” your v2 customizations will need conversion. Bootstrap classes, jQuery calls, and Chart.js configs all need updating.

Quick start

```bash
git clone https://github.com/ColorlibHQ/gentelella.git
cd gentelella
npm install
npm run dev
```

Open http://localhost:9173/production/index.html

License

MIT β€” free for personal and commercial use.

v4.0.0-rc.1 β€” Release candidate

Pre-release

Choose a tag to compare

@puikinsh puikinsh released this 02 May 16:35

🟒 Live preview: preview.colorlib.com/theme/gentelella-v4-rc1/

This is the v4 release candidate β€” a complete rewrite of Gentelella for 2026. Bootstrap and jQuery are gone; the entire design system is custom SCSS.

The v2.x line remains the published latest on npm and the stable GitHub release. Install rc.1 to test:

# Clone the v4 branch
git clone -b v4 https://github.com/ColorlibHQ/gentelella.git
cd gentelella
nvm use && npm install
npm run dev

Or browse the live preview at the top of this note.


[4.0.0-rc.1] - 2026-05-01

Release candidate. Massive expansion since beta.2 β€” 60 pages, 20 chart variants, full mail client, live theme generator, component playground, PWA, sidebar rail mode. The published latest tag still points at the v2.x line; v4 ships under the next distribution tag until 4.0.0 stable.

Added

New top-level features

  • Live theme generator (production/theme.html) β€” pick a primary color from 11 swatches or a hex input; tune corner radius, sidebar width, body font size; switch sidebar style (Dark / Black / Light / Brand); flip light/dark mode. Every chart, button, badge, card and link restyles in real time. Generated SCSS preview is copyable and downloadable as _tokens-override.scss.
  • Component playground (production/playground.html) β€” every reusable component on a single scrolling page, side-by-side with its exact HTML and a "Copy" button. Sticky left rail with scrollspy nav, 13 sections covering buttons, status, alerts, cards, forms, tables, tabs, progress, stats, timeline, accordion, empty state.
  • Command palette (⌘K / Ctrl+K) β€” fuzzy search across all 60 pages and inline actions (toggle theme, open profile, sign out, etc.). Built-in matcher with subsequence + word-boundary scoring. Topbar search input now opens the palette on focus.
  • PWA β€” full site.webmanifest with shortcuts, service worker (network-first HTML, cache-first assets, offline fallback), apple-touch-icon, theme-color metas (light + dark). Installable on macOS / Windows / mobile.
  • Sidebar rail mode β€” desktop hamburger collapses sidebar from 252px β†’ 64px showing icons only. Tooltip on hover via data-rail-label. Submenu groups become click-to-flyout when collapsed. Persists in localStorage. Same hamburger toggles drawer on mobile.

New pages (8)

  • production/theme.html β€” theme generator
  • production/playground.html β€” component playground
  • production/offline.html β€” PWA offline fallback
  • production/chat.html β€” fully interactive 8-conversation chat
  • production/kanban.html β€” HTML5 drag-drop kanban with edit modals
  • production/file_manager.html β€” tree + grid file browser with breadcrumbs
  • production/notifications.html β€” filterable notifications page
  • production/settings.html β€” persisted settings with 8 sections

New chart factories (added to src/v4/charts.js; 20 total now)

  • stacked-area Β· multi-series stacked area with smooth fills
  • horizontal-bar Β· top categories ranked
  • mixed-bar-line Β· bars + secondary-axis trend line
  • radar Β· 6-axis comparison
  • gauge Β· single-KPI progress arc
  • scatter Β· bubble plot with size encoding
  • heatmap Β· week Γ— hour activity
  • funnel Β· conversion stages
  • candlestick Β· OHLC market data
  • polar-bar Β· circular bar chart
  • treemap Β· proportional cells
  • sankey Β· flow diagram
  • calendar-heatmap Β· GitHub-contribution-style 12-month grid
  • gantt Β· project timeline using custom series

New form components (src/v4/form-controls.js)

  • Date-range picker β€” two-month grid, 6 presets (Today / Last 7 days / Last 30 days / This month / Last month / This year), hover preview, Monday-first weeks. No library.
  • Rich text editor β€” toolbar (bold / italic / underline / H2 / blockquote / lists / link / code / clear), keyboard shortcuts (⌘B/I/U/K), syncs to a hidden textarea for form submission.
  • Multi-select with chips β€” autocomplete on type, ↑/↓/Enter keyboard nav, Backspace removes last chip, binds to a real <select multiple>.

New SCSS primitives in _components.scss and _forms.scss

  • .accordion β€” native <details> styled with primary border on open
  • .drawer / .drawer-backdrop β€” slide-in left/right side panel
  • .timeline β€” color-coded event timeline with vertical guide rail
  • .banner β€” info / warning / danger / success callouts with action buttons
  • .popover-trigger β€” hover/focus rich-content popovers
  • .empty-state β€” generic centered icon + title + text + actions block
  • .card.is-refreshing β€” sweep animation on card refresh
  • .input-affix β€” input with prefix/suffix segments
  • .segmented β€” compact tab-like radio
  • .switch β€” iOS-style toggle
  • .color-grid β€” color swatch picker
  • .tag-input β€” chip input with Γ— removal
  • .rating β€” star rating
  • .search-suggest β€” autocomplete dropdown
  • .password-strength β€” 4-segment meter
  • .otp-grid β€” 6-box one-time-code input
  • .file-input β€” compact file picker with filename echo
  • .avatar-upload β€” circular avatar with hover overlay
  • .stepper β€” number stepper with +/βˆ’ buttons

Real interactivity replacing demo toasts

  • Inbox (src/v4/inbox.js) β€” full mail client: 5 folders + 4 labels, click-to-read pane, compose modal, reply / forward (prefilled), star, trash / restore / delete-forever, edit drafts, mark-all-read, per-folder search, J/K/R/S/#/C keyboard shortcuts.
  • Settings (src/v4/settings.js) β€” every toggle persists to localStorage, profile form has dirty-state with Save/Cancel rollback, theme/density radios persist and apply, integration cards toggle Connect ↔ Disconnect, Revoke session opens confirm modal, Danger zone has real export download / transfer / delete-account flows, team Invite + Manage modals.
  • Topbar dropdowns β€” clicking a notification or message row opens a real detail modal with kind icon, body, and action buttons (Dismiss / View all / Open in inbox / Send reply).
  • User avatar menu β€” entries route to real pages (Profile / Settings / Theme generator / FAQ / Lock screen) or open modals (Keyboard shortcuts grid, Sign out confirm).
  • Card 3-dot menu β€” Refresh adds shimmer + repaints chart; Move up / Move down reorder siblings; Hide card has 5-second clickable undo toast.
  • Page-actions (src/v4/page-actions.js) β€” Print / Export / Refresh / Share / Compose / New {anything} / Invite buttons routed to real handlers across the whole template (window.print, download blob, navigator.share, modals).
  • Invoice β€” editable line items (description / sub / qty / rate), Add / Remove rows, editable discount + VAT %, live total recompute, Mark-as-paid flips status pill and advances payment timeline.
  • DataTables β€” data-selectable enables row selection (header checkbox = select all), data-export="filename" adds CSV export button.

Sidebar rebuild

  • 7 nav groups with submenu support: General (Dashboards Γ— 4, Forms Γ— 6, Tables Γ— 2, Charts Γ— 3, + Calendar / Map), Apps (5), E-commerce (5 incl. Orders Γ— 2), Projects (2), UI library (7 incl. Playground / Theme / Typography / Icons), Admin (5), Layouts (4)
  • Accordion behavior β€” opening one group closes others; chosen state persists in sessionStorage so navigation doesn't snap it shut
  • Visual redesign β€” vertical guide rail, colored connector tick on active sublink (primary teal), parent stays subtly highlighted when a child is current, smoother chevron rotation
  • Every page reachable from the sidebar (was 22 of 43; now all 60)

Dashboards expanded (3 thin β†’ comprehensive)

  • index2.html (Analytics) β€” 6 rows / 18 cards: KPI sparklines, live counter, stacked-area, conversion funnel, activity heatmap, top pages / countries / referrers, goals, top searches, cohort retention matrix
  • index3.html (Sales) β€” 6 rows / 14 cards: pipeline KPIs, quarterly target gauge, mixed bar/line, pipeline by stage, lead-sources donut, quota attainment, activity radar, top reps, won-this-week, deals at risk, lost reasons
  • index4.html (Operations) β€” 5 rows / 18 cards: maintenance banner, 4 KPIs, 6-bar resource usage, API endpoint stats, cache-hit gauge, service status, incident timeline, background jobs, deployment history, recent errors

Page expansion

  • icons.html β€” 120+ icons in 14 categories (was 44 flat), live search filter, click to copy name, 48px icon size, 180px cells
  • general_elements.html β€” added Banners / Accordion / Drawer / Popover / Timeline sections
  • profile.html β€” added stats grid, achievements row (6 badges), connected accounts (GitHub / Google / Slack / X), recent activity timeline
  • chartjs.html β€” 16 chart variant cards organized into themed rows
  • echarts.html β€” full 16-chart gallery
  • typography.html β€” 6 sections (display, heading scale, inline, block, code, terminal, numerals, truncation)
  • form.html β€” 4 sections, 25+ field variants (advanced controls section showcasing date-range / multi-select / rich-text)
  • widgets.html β€” 18 widget variants in 6 rows
  • landing.html β€” eyebrow pill, stats band, expanded features (3 β†’ 6), showcase section linking to 12 demos, stack section, 3 testimonials, 6-question FAQ accordion

Tooling & DX

  • Playwright screenshot pipeline (scripts/screenshots.mjs) β€” npm run screenshots boots vite preview and captures 22 pages Γ— light + dark = 44 PNGs at 1440Γ—900 @ 2x. Outputs to docs/screenshots/{light,dark}/ plus a manifest.json.
  • Random-collision ports β€” dev defaults to 9173, preview to 9174 (was 3000/4173). Override via PORT / PREVIEW_PORT env.
  • CONTRIBUTING.md β€” add-a-page / add-a-chart / add-a-table flows, what we don't accept.
  • **Publi...
Read more

v2.2.0 β€” Fresh for 2026

Choose a tag to compare

@puikinsh puikinsh released this 23 Apr 13:21

Live preview: https://colorlib.com/polygon/gentelella/

Comprehensive dependency refresh, design-token consolidation, HTML validity sweep, and a senior-dev polish pass.

Highlights

  • Vite 8 + Rolldown β†’ 35% faster builds (22.9s β†’ 13.9s)
  • ECharts tree-shaken β†’ vendor-echarts chunk 1,108 kB β†’ 752 kB (-32%, -113 kB gzipped)
  • Unified card design system β€” every raised surface (.x_panel, .dashboard_graph, .tile-stats, .top_tiles .tile, Bootstrap .card) now pulls from shared --gt-radius-card / --gt-shadow-card / --gt-card-border tokens
  • HTML validity sweep β€” closed ~600 unclosed <li> tags across 34 pages (sidebar + dropdown items)
  • Standardised <head> across all 40 pages β€” security headers (CSP, X-Content-Type-Options, Referrer-Policy, Permissions-Policy), full favicon set, web app manifest, theme color, and a consistent {Page} | Gentelella title
  • Proper heading hierarchy β€” every page now has exactly one <h1>; dashboard index pages use visually-hidden H1s
  • Sidebar state persistence β€” collapsed/expanded state survives page navigation via a safe localStorage wrapper
  • Auth/error pages re-branded β€” replaced the sidebar-tinted logo.svg with a CSS .brand-mark badge that's actually visible on white cards
  • Chart performance β€” real-time intervals pause while the tab is hidden; ECharts resize debounced at 150 ms
  • <a href="#"> jump-to-top killed via one delegated click handler
  • Dev server fix β€” local /polygon/gentelella/ URL no longer 404s

Major dependency upgrades

  • Vite 7 β†’ 8.0.10 (Rolldown bundler β€” required manualChunks rewrite to function form)
  • ESLint 9 β†’ 10.2.1
  • Uppy 4 β†’ 5 (CSS import path: /dist/style.min.css β†’ /css/style.min.css)
  • jsdom 27 β†’ 29
  • rollup-plugin-visualizer 6 β†’ 7

Plus patch/minor bumps across the entire dependency tree. See changelog.md for the full breakdown including the verification matrix.

Verification

  • npm run build β€” 13.9s, passing
  • npm test β€” 126/126 passing
  • npm run lint β€” 0 errors
  • Dev server smoke-tested on all key pages

Credits

Thanks to @krishna7805 for PR #980, which surfaced the unclosed <li> and window.echarts consistency issues that became part of this release.

Gentelella v2.1.4

Choose a tag to compare

@puikinsh puikinsh released this 13 Jan 11:36

UI Polish & Navigation Enhancement Release

We're excited to announce Gentelella v2.1.4, focused on UI polish, improved navigation, and cross-page consistency!

Highlights

Go Pro Sidebar Link

Added a prominent "Go Pro" menu item at the top of the sidebar, linking to DashboardPack premium templates. Includes UTM tracking for analytics and opens in a new tab.

Sidebar Badge System

Introduced a colorful badge system throughout the sidebar navigation to highlight important items:

  • Pro badge (yellow) - Go Pro link
  • Hot badge (red) - UI Elements menu
  • New badge (green) - Data Presentation menu
  • Updated badge (blue) - ECharts and Landing Page

All badges have consistent styling with right alignment.

Avatar/Profile Thumbnail Redesign

Redesigned profile icons in activity feeds with colorful circular backgrounds and white icons for a modern, vibrant look.

Progress Bar Fixes

Fixed invisible progress bars that were affecting dashboard pages. Progress bars now display correctly with proper background colors and consistent styling.

Uppy File Upload Integration

Replaced the legacy Dropzone.js with the modern Uppy file uploader, featuring:

  • Drag & drop with visual feedback
  • Image preview thumbnails
  • Progress indicators
  • Cleaner, more maintainable code

Cross-Page Consistency

All 33 HTML template pages now share an identical sidebar menu structure, providing a consistent user experience when navigating between pages.

Full Changelog

New Features:

  • Go Pro sidebar link with UTM tracking
  • Sidebar badge system (Pro, Hot, New, Updated)

UI/UX Improvements:

  • Redesigned avatar/profile thumbnails with colorful backgrounds
  • Fixed invisible progress bars
  • Removed spacing inconsistencies on dashboard
  • Unified sidebar menu across all pages

File Upload:

  • Replaced Dropzone.js with Uppy

Code Quality:

  • Removed inline CSS
  • Consolidated SCSS styles

Upgrade Instructions

# Pull the latest changes
git pull origin master

# Install any new dependencies
npm install

# Build for production
npm run build

Links


Full Changelog: v2.1.3...v2.1.4

Thank you for using Gentelella! If you find this template useful, please consider giving it a star on GitHub.

Gentelella v2.1.1

Choose a tag to compare

@puikinsh puikinsh released this 05 Sep 19:18

Gentelella v2.1.1 - Maintenance Release

Summary

This maintenance release focuses on updating all dependencies to their latest versions, fixing chart functionality issues, and enhancing the developer experience. The release ensures all security vulnerabilities are patched while improving widget styling and chart visualizations.

Key Improvements

Dependency Updates

  • All dependencies updated to latest versions for security and performance
  • ECharts upgraded to 6.0.0 (major version) with enhanced features
  • Security patches applied resolving all CVE vulnerabilities
  • Modern toolchain with latest Vite, TypeScript, and ESLint versions

Chart & Widget Enhancements

  • Fixed ECharts page - All charts now display correctly on echarts.html
  • Enhanced widget system - Improved content density with professional styling
  • Chart color consistency - Fixed Device Usage chart to match label colors
  • Interactive functionality - Restored visitors location map and weather icons

Developer Experience

  • Stable development server with auto-restart capability
  • Clean production builds with comprehensive console log removal
  • Enhanced build configuration with better optimization settings
  • Improved debugging with development-only logging

Detailed Changes

Dependency Version Updates

Vite: 7.0.6 β†’ 7.1.4
Bootstrap: 5.3.6 β†’ 5.3.8  
ECharts: 5.6.0 β†’ 6.0.0
Chart.js: 4.4.2 β†’ 4.5.0
jQuery: 3.6.1 β†’ 3.7.1
TypeScript: 5.8.3 β†’ 5.9.2
ESLint: 9.31.0 β†’ 9.34.0
DataTables: 2.3.2 β†’ 2.3.3
Font Awesome: 7.0.0 β†’ 7.0.1
Ruby: 2.6.10 β†’ 3.3.9
Nokogiri: 1.13.10 β†’ 1.18.9

Fixed Functionality

  • ECharts Page: All 12 chart types now display correctly
    • Bar graphs, pie charts, donut charts, scatter plots
    • Line charts, horizontal bars, world map visualization
    • Pyramid sales funnel with improved readability
    • Sonar radar chart for performance metrics
  • Index Dashboard: Restored interactive features
    • Visitors location map with country data
    • Animated weather icons (Skycons)
    • Device usage chart with matching colors
  • Widget Cards: Enhanced content density and styling
    • Additional metrics and growth indicators
    • Professional card design with hover effects
    • Better typography and spacing

Technical Improvements

  • Development Server: Enhanced stability and reliability
    • Fixed frequent crashes and restart issues
    • Added automatic restart capability with dev:watch script
    • Improved file watching and hot module replacement
  • Production Builds: Clean and optimized output
    • Comprehensive console statement removal
    • Enhanced Terser configuration for better minification
    • ES module support with modern JavaScript
  • Code Quality: Updated linting and formatting tools
    • Latest ESLint and Prettier configurations
    • Better error handling and debugging capabilities

Installation

For New Projects

git clone https://github.com/puikinsh/gentelella.git
cd gentelella
npm install
npm run dev

For Existing Projects

git pull origin master
npm install
npm run build

Security Notes

  • All CVE vulnerabilities resolved with latest dependency versions
  • jQuery upgraded to 3.7.1 - addresses Dependabot security alerts
  • Ruby and Nokogiri updated - resolves all documentation build vulnerabilities
  • Enhanced security headers and proper CSP configuration

Development Commands

npm run dev          # Start development server
npm run dev:watch    # Start with auto-restart capability  
npm run build        # Production build
npm run lint:fix     # Fix linting issues
npm run format       # Format code
npm run analyze      # Bundle analysis

Breaking Changes

None - This is a backward-compatible maintenance release.