A professional, production-ready admin dashboard interface built for modern SaaS platforms.
Designed for analytics, user management, and business monitoring.
| Feature | Description |
|---|---|
| 📊 Interactive Charts | Area, Bar, and Donut charts powered by Recharts |
| 🌙 Dark / Light Mode | Toggle with persistence via localStorage |
| 📱 Fully Responsive | Optimized for desktop, tablet, and mobile |
| Smooth animation with icon-only mode | |
| 🔍 Search & Filters | Real-time search across tables with role/status filters |
| 📄 Pagination | Paginated data tables with numbered page controls |
| ⌛ Loading Skeletons | Shimmer loading states for better UX |
| 🎨 Glassmorphism UI | Modern frosted glass effects and soft shadows |
| 🔔 Notifications | In-app notification panel with unread indicators |
| ⚙️ Settings Panel | Profile, notifications, security & billing management |
- Dashboard Overview — Revenue/Users/Orders/Growth stat cards, revenue trend chart, weekly sales chart, recent activity feed
- User Management — Data table with avatars, roles (Admin/Manager/Editor/User), status badges, search, filters & pagination
- Analytics — Performance KPI cards, traffic sources chart, revenue category donut chart, page performance bar chart
- Orders & Transactions — Sortable data table with 5 status types (Completed/Pending/Processing/Refunded/Failed), filters & pagination
- Settings — Tabbed interface with Profile, Notification Preferences, Security (2FA, sessions), and Billing sections
- Notifications — Full notification list with unread indicators, mark-all-read, and delete functionality
| Technology | Purpose |
|---|---|
| React 19 | UI Framework |
| Vite 7 | Build Tool & Dev Server |
| Tailwind CSS v4 | Utility-first CSS |
| Recharts | Data Visualization |
| React Router v7 | Client-side Routing |
| Lucide React | Icon Library |
- Node.js ≥ 18
- npm ≥ 9
# Clone the repository
git clone https://github.com/AdityaS62/saas-admin-dashboard.git
# Navigate to the project
cd saas-admin-dashboard
# Install dependencies
npm install
# Start development server
npm run devThe app will be running at http://localhost:5173/
npm run build
npm run previewsrc/
├── components/
│ ├── Layout.jsx # App shell with sidebar + navbar
│ ├── Sidebar.jsx # Collapsible navigation sidebar
│ ├── Navbar.jsx # Top bar (search, theme, notifications, profile)
│ └── Skeleton.jsx # Loading skeleton components
├── context/
│ └── ThemeContext.jsx # Dark/Light mode state management
├── data/
│ └── mockData.js # Mock data for all dashboard sections
├── pages/
│ ├── DashboardPage.jsx # Main analytics overview
│ ├── UsersPage.jsx # User management table
│ ├── AnalyticsPage.jsx # Detailed analytics with multiple charts
│ ├── OrdersPage.jsx # Orders & transactions table
│ ├── SettingsPage.jsx # Account & app settings
│ └── NotificationsPage.jsx # Notifications center
├── App.jsx # Router configuration
├── main.jsx # Entry point
└── index.css # Tailwind v4 + custom design system
- Color Palette — Indigo primary (#6366f1) with green, amber, blue accents
- Typography — Inter font family with carefully tuned weights
- Spacing — Consistent 4px grid system
- Border Radius — Rounded corners (10–16px) for a modern feel
- Shadows — Multi-layered soft shadows for depth
- Transitions — Smooth 200–300ms easing on all interactive elements
Contributions are welcome! Feel free to open an issue or submit a pull request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is open source and available under the MIT License.
Aditya Kumar
- GitHub: @AdityaS62
If you found this project helpful, please consider giving it a ⭐