A beautiful, modern web dashboard for monitoring VPN panel user statistics and server health metrics in real-time.
- Stunning gradient design with animated backgrounds
- Responsive layout for all devices
- Smooth animations and transitions
- Dark theme optimized for long viewing sessions
- Live bandwidth tracking - Monitor upload/download in real-time
- Server health metrics - CPU, RAM, and disk usage
- User account status - Active/inactive status display
- Data limit visualization - Progress bars and circular gauges
- Auto-refresh - Dashboard updates every 2 seconds
- CSRF protection
- SQL injection prevention
- Developer tools protection
- Secure session handling
- ✅ 3X-UI Panel
- ✅ Marzban Panel
- 🔄 Hiddify Panel (Coming soon)
bash <(curl -Ls https://raw.githubusercontent.com/ScriptCascade/traffic-ui-open-source/main/install.sh)# Clone the repository
git clone https://github.com/ScriptCascade/traffic-ui-open-source.git
cd traffic-ui-open-source
# Run installer
sudo bash install.shAfter installation:
http://YOUR_SERVER_IP:81
| Requirement | Version/Details |
|---|---|
| OS | Ubuntu 18.04+ / Debian 10+ |
| RAM | Minimum 512MB |
| VPN Panel | 3X-UI or Marzban |
| Root Access | Required for installation |
- Open Traffic-UI in your browser:
http://YOUR_IP:81 - Enter username or UUID
- Click "Check Usage"
- View real-time statistics
Access the management menu:
traffic-uiAvailable Options:
| Option | Description |
|---|---|
| 1. Restart | Restart Traffic-UI service |
| 2. Change Server Name | Customize your server display name |
| 3. Setup SSL | Configure SSL certificates |
| 4. Uninstall | Remove Traffic-UI completely |
| 5. Exit | Close the menu |
Edit /var/www/html/.env:
# For 3X-UI
database.default.database = /etc/x-ui/x-ui.db
# For Marzban
database.default.database = /var/lib/marzban/db.sqlite3Edit /var/www/html/public/panel.txt:
1 # For 3X-UI
2 # For Marzban
3 # For Hiddify
Option 1: Using Menu (Recommended)
traffic-ui
# Select option 2 - Change Server NameOption 2: Manual Edit
Edit /var/www/html/app/Views/home.php and find:
<h1 class="server-title">{{server_name}}</h1>Replace {{server_name}} with your desired name.
# Check installation logs
cat /tmp/traffic-ui-install.log# Check if Apache is running
sudo systemctl status apache2
# Restart Apache
sudo systemctl restart apache2
# Check firewall
sudo ufw allow 81/tcp# Verify database exists
ls -la /etc/x-ui/x-ui.db
# Check permissions
sudo chmod 644 /etc/x-ui/x-ui.db
# Verify panel type
cat /var/www/html/public/panel.txtThis usually means the view file is missing or has wrong permissions:
# Check if view file exists
ls -la /var/www/html/app/Views/home.php
# Fix permissions
sudo chmod 644 /var/www/html/app/Views/home.php
sudo systemctl restart apache2traffic-ui
# Select option 4 - Uninstallcd traffic-ui-open-source
sudo bash uninstall.shbash <(curl -Ls https://raw.githubusercontent.com/ScriptCascade/traffic-ui-open-source/main/uninstall.sh)traffic-ui-open-source/
├── install.sh # Quick installer (curl-compatible)
├── install-traffic-ui.sh # Detailed installer with progress
├── uninstall.sh # Uninstaller script
├── traffic-ui-menu.sh # Management menu
├── Home.php # Main controller
├── home-content.php # Dashboard view template
├── Routes.php # URL routing configuration
├── Filters.php # Security filters
├── env # Environment configuration
├── panel.txt # Panel type selector
├── GaugeMeter.js # Gauge meter library
├── commands.txt # Quick reference commands
└── README.md # This file
-
Usage Statistics
- Total data used vs. limit
- Upload/download breakdown
- Progress bar visualization
-
Usage Progress Circle
- Animated circular gauge
- Real-time percentage display
- Color-coded status
-
Server Health
- CPU load percentage
- RAM usage monitoring
- Disk space tracking
-
Server Information
- Server uptime
- Geographic location
- IP address
- Server status
-
Account Information
- Active/inactive status
- Days remaining
- Data limit
- Last update time
- CSRF Protection - Prevents cross-site request forgery
- SQL Injection Prevention - Parameterized queries
- Developer Tools Protection - Blocks inspect element
- Right-click Protection - Prevents context menu
- Keyboard Shortcuts Disabled - Blocks F12, Ctrl+Shift+I, etc.
- Input Validation - UUID and username verification
- Full support for user statistics
- Real-time traffic monitoring
- Account status tracking
- Complete integration
- User data tracking
- Traffic usage monitoring
- Planned support in future updates
- Telegram Channel: @traffic_ui
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- ✅ Initial open source release
- ✅ Support for 3X-UI and Marzban
- ✅ Modern responsive UI design
- ✅ Real-time monitoring dashboard
- ✅ SSL support
- ✅ One-line installation
- ✅ Management menu with server name customization
- Created by: mAX web™
- Framework: CodeIgniter 4
- Gauge Library: Modified GaugeMeter by Mictronics
- Original Concept: AshAlom
- Icons: Font Awesome
- Fonts: Google Fonts
This project is open source and available for free use.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
If you find this project useful, please consider giving it a star ⭐
For support and questions:
- Telegram: @traffic_ui
Made with ❤️ by mAX web™