Admin Components
Professional components for admin panels, dashboards, and management systems
Sidebar Navigation
The sidebar navigation is active on this page - see it on the left side!
Live Sidebar Example
This page demonstrates a real-world implementation of the sidebar component. The sidebar you see on the left is fully functional and includes:
- Brand section - "Admin Panel" with icon and built-in toggle button
- Navigation sections - Organized menu items grouped by category
- Badges - Notification counts and status indicators
- User profile - Fixed at the bottom with avatar and role
- Compact mode - Click the toggle button in the sidebar header to switch modes
Implementation
To use the sidebar in your project:
- Add
class="has-sidebar"to your body tag - Include the sidebar component after your header
- Wrap your main content in a
<div class="main-content"> - The sidebar will automatically adjust for mobile devices
Dashboard Cards
Metric cards with icons, trends, progress bars, and mini charts
Metric Cards
Total Revenue
Active Users
New Orders
Support Tickets
Progress Cards
Server Load
Memory Usage
Project Completion
Disk Space
Mini Chart Cards
Daily Sales
Page Views
Conversions
Quick Stats
Compact statistics for space-efficient dashboards
Data Grid
Advanced data table with sorting, filtering, bulk actions, and inline editing
User Management
| Name | Role | Department | Status | Last Active | Actions | |
|---|---|---|---|---|---|---|
|
SJ
|
Administrator | Engineering | Active | 2024-01-15 14:30 | ||
|
MC
|
Developer | Engineering | Active | 2024-01-15 13:45 | ||
|
ED
|
Designer | Design | Inactive | 2024-01-10 09:20 | ||
|
JW
|
Manager | Sales | Active | 2024-01-15 15:00 | ||
|
MG
|
Developer | Engineering | Pending | 2024-01-14 11:30 | ||
|
RT
|
Support | Customer Service | Active | 2024-01-15 16:15 | ||
Search & Filters
Advanced search with autocomplete, filters, saved searches, and multiple variants
Compact Search Bar
Search with Category Selector
Activity Feed
Timeline for activity logs, notifications, and updates with filtering and real-time features
Activity Feed
New user registered
Sarah Johnson joined as Administrator
Order completed
Order #12345 has been successfully delivered
System update
Database maintenance completed successfully
New comment
Emily Davis commented on "Q4 Sales Report"
File uploaded
Q4 Financial Report.pdf uploaded to Documents
Security alert
Failed login attempts detected from unknown IP
Compact Activity List
File Manager
Drag-and-drop file uploads with progress tracking, file management, and preview functionality
File Manager
5 filesDrop files here to upload
or
Uploading Files...
No files uploaded yet
Drag and drop files here or click the upload button to get started