AdminManagerEditorLow StockOut of StockIn StockDraft
Alerts
Contextual feedback messages for user actions.
Alert Variants
Success — Changes saved!
Your profile information has been updated successfully.
Error — Action failed
Something went wrong. Please check your connection and try again.
Warning — Session expiring
Your session will expire in 5 minutes. Save your work to avoid losing changes.
Info — Update available
A new version of PanelPro (v2.1.0) is available with new features and bug fixes.
Toast Notifications
Cards
Base card container used throughout the dashboard.
Basic Card
A simple card with a header, body content, and optional action button in the top right.
Accent Card
Card with a coloured top border accent. Great for highlighting important content sections.
Gradient Card
A card with a gradient background for special callouts or promotional content areas.
Stat Cards
Metric cards for KPIs with icon, value, and trend indicator.
Total Revenue
$128,430
12.5% vs last month
Total Orders
3,842
8.2% vs last month
New Customers
1,247
18.7%
Bounce Rate
38.4%
2.1%
Form Inputs
All input types including text, email, password, textarea, and select.
Looks good!
Please enter a valid email
Checkbox & Radio
Custom styled checkbox and radio button components.
Checkboxes
Radio Buttons
Toggle Switches
Email Notifications
Push Notifications
Dark Mode
Disabled Option
Tabs
Horizontal tab navigation for content switching.
Profile Tab
Manage your personal information, profile photo, timezone and language preferences.
Security Tab
Update your password and manage two-factor authentication and active sessions.
Notifications Tab
Configure your email, push, and SMS notification preferences for all event types.
Appearance Tab
Customise your theme colours, font size, and sidebar style preferences.
Accordion
Collapsible content panels for FAQs and grouped content.
What is PanelPro?
PanelPro is a professional admin dashboard UI kit built with HTML5, SCSS, Bootstrap 5, and Vanilla JavaScript. It provides a complete set of pages, components and charts for building modern admin interfaces.
Which chart library is used?
PanelPro uses ApexCharts for all data visualisations including area charts, bar charts, donut charts, line charts, radial charts, and mini sparklines.
Is the kit fully responsive?
Yes! PanelPro is fully responsive across all screen sizes. The sidebar collapses to an overlay on mobile, the grid adapts using Bootstrap's responsive breakpoints, and all components scale gracefully.
How do I customise the theme colours?
All colours are defined as SCSS variables in assets/scss/_variables.scss. Update the $primary, $secondary and other variables, then recompile using sass assets/scss/main.scss assets/css/main.css.
Modals
Dialog overlays for confirmations, forms, and notifications.
Modal Sizes
Dropdowns
Context menus and action dropdowns.
View Details
Edit
Duplicate
Delete
All Items
Active Only
Inactive Only
Last 7 Days
Last 30 Days
Export CSV
Export PDF
Print
Tables
Data table with search, sortable columns, and status badges.
Sample Data Table
Name
Role
Status
Joined
Actions
AJ
Ajay Gorecha
ajay@panelpro.io
Admin
Active
Jan 1, 2024
SJ
Sarah Johnson
sarah@panelpro.io
Manager
Active
Feb 14, 2024
MC
Michael Chen
mchen@panelpro.io
Editor
Pending
Mar 3, 2024
EW
Emma Williams
emma@panelpro.io
Viewer
Inactive
Mar 4, 2024
Pagination
Navigation controls for multi-page data sets.
Default
Middle Page
Progress Bars
Linear progress indicators in multiple colours and variants.
Revenue Goal78%
Orders Fulfilled54%
Customer Retention91%
Pending Tickets36%
Error Rate12%
Avatars
User avatars in multiple sizes and grouped layouts.
Sizes
AJ
30px
MK
40px
EW
52px
SR
72px
Avatar Group (stacked)
AJ
SJ
MC
EW
+5
Activity Feed
Vertical timeline for events and audit logs.
New order #ORD-1042 placed by Sarah Johnson for $1,299
2 minutes ago
Michael Chen registered as a new customer
18 minutes ago
Product iPhone 15 Pro stock updated to 48 units
45 minutes ago
Payment of $999 confirmed for order #ORD-1039
1 hour ago
Order #ORD-1038 cancelled by Olivia Brown
2 hours ago
Tooltips
Hover tooltips using the data-tooltip attribute.
DeliveredPending
Icons
PanelPro uses Remix Icons — a neutral, open source icon library.
Dashboard
Cart
User
Chart
Settings
Bell
Mail
Search
Heart
Star
Home
File
Folder
Image
Video
Music
Camera
Location
Phone
Lock
Shield
Eye
Edit
Delete
Add
Close
Check
Arrow Up
Arrow Down
Arrow Left
Arrow Right
Download
Upload
Share
Link
Copy
Save
Refresh
Logout
Login
Group
Team
Box
Store
Money
Coupon
Truck
Calendar
Time
Global
Wifi
CPU
Database
Server
Code
Terminal
Bug
Layout
Palette
Font
Warning
Info
Help
Skeleton Loaders
Placeholder animations shown while content is loading.
Card Skeleton
Table Row Skeleton
Empty States
Friendly messages shown when no data is available.
No Orders Yet
Your order list is empty. Orders will appear here once customers start purchasing.
No Results Found
We couldn't find anything matching your search. Try using different keywords.
No Notifications
You're all caught up! New notifications will appear here when there's activity.
Confirmation
Action completed successfully!
Default Modal
This is a default size modal dialog. Use modals for confirmations, forms, or detailed information without navigating away from the current page.
Large Modal – Add New User
Delete Item
Are you sure?
This action cannot be undone. The item will be permanently deleted.