An elegant and responsive dark-themed security dashboard built using Next.js, TypeScript, and Tailwind CSS. It features a modern, modular UI powered by shadcn/ui, rich visualizations via Recharts, and easy-to-navigate layouts with mock data for smooth interactivity.
🔗 Live Demo: [https://security-dashboard-gilt.vercel.app/
Dashboard Overview
- Framework: Next.js (App Router)
- Language: TypeScript
- Styling: Tailwind CSS (Dark Theme)
- UI Components: shadcn/ui
- Charts: Recharts
- Deployment: Vercel
- Data: Mock data (stored in project files)
- ✅ Fully responsive: Desktop, Tablet & Mobile
- ✅ Dark mode with custom theme palette
- ✅ Sidebar with toggle/hide functionality
- ✅ Topbar with title, avatar, and search
- ✅ Filterable Security Events Table
- ✅ Reusable & modular UI components
- ✅ Real-time feel (mock data simulation)
- ✅ Interactive charts with tooltips
- ✅ Hover effects and smooth transitions
- ✅ Deployed on Vercel for instant access
- 📈 Line Chart
- 📉 Bar Chart
- 🧾 Stats Cards (Users, Revenue, Threats, etc.)
- 🔍 Filterable Security Events Table
- 📂 Recent Activity Table
- 🧠 Searchable/Filterable Dropdowns
- 🧱 Stacked Bar Chart
- 🥧 Pie Chart & Doughnut Chart
- 🌐 Multi-line Chart
- 🚀 Gauge/Speedometer Chart (Geco Style)
| Element | Hex Code |
|---|---|
| Background | #171717 |
| Container | #232323 |
| Sidebar | #212121 |
| Card Background | #2A2A2A |
| Card Hover | #333333 |
| Input Background | #1D1D1D |
| Accent | #426CFF |
| Accent Hover | #375BD9 |
| Text Primary | #FFFFFF |
| Text Secondary | #A1A1AA |
| Border | #3D3D3D |
| Border Hover | #4A4A4A |
Dashboard
Sidebar Toggle
Charts
Stats
Security Events
Step 1: Clone the repository using the project's Git URL.
git clone https://github.com/Arjun-9696/security-dashboard.git
Step 2: Navigate to the project directory.
cd security-dashboard
Step 3: Install the necessary dependencies.
npm i
Step 4: Start the development server with auto-reloading and an instant preview.
npm run dev