Documentation – PanelPro

Introduction

PanelPro is a modern admin dashboard UI kit built with HTML5, SCSS, Bootstrap 5, and vanilla JavaScript. It requires no build tools or npm packages to get started.

v2.0.0 Bootstrap 5 ApexCharts RemixIcons

Key features include dark mode, multi-language support (EN/ES/FR/DE), 24+ pages, responsive layout, and an extensive component library.

Installation

PanelPro requires no build process. Simply open any HTML file in a browser.

Option 1: Direct Browser

# Open directly in browser
open index.html

Option 2: Local Server

# Using Python
python3 -m http.server 3000

# Using Node.js (npx)
npx serve .

File Structure

panelpro/

├── assets/

│   ├── css/main.css

│   ├── js/

│   │   ├── main.js

│   │   ├── sidebar.js

│   │   ├── charts.js

│   │   ├── tables.js

│   │   └── i18n.js

│   └── logo/

├── pages/          (24+ pages)

├── index.html

└── CLAUDE.md

Dark Mode

Dark mode is implemented using a data-theme="dark" attribute on the <html> element. The theme is persisted to localStorage.

// Toggle dark mode programmatically
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');

// Or use the built-in button
<button id="darkModeToggle"><i class="ri-moon-line"></i></button>

Multi-Language (i18n)

Use data-i18n attributes on elements to enable automatic translation.

<span data-i18n="nav.dashboard">Dashboard</span>
<input data-i18n-placeholder="topbar.search">

// In JavaScript
window.i18n.setLanguage('es'); // Switch to Spanish
window.i18n.t('nav.dashboard'); // Get translated string

Toast Notifications

Use the global showToast() function to display notifications.

showToast('Operation successful!', 'success');
showToast('Something went wrong', 'danger');
showToast('Please check this', 'warning');
showToast('FYI: Update available', 'info');

// With custom duration (ms)
showToast('Custom duration', 'success', 5000);