Nexus Dashboard — Premium Next.js Admin Template

A stunning, production-ready admin dashboard built with Next.js 16, React, and pure CSS. Zero bloated dependencies. Dark mode. Glassmorphism. Beautiful charts. Ready to customize.

---

✨ Features

• 🌑 Dark Mode by Default — Stunning dark theme with carefully crafted colors
• 🪟 Glassmorphism Design — Modern glass-like cards with backdrop blur
• 📊 Zero-Dependency Charts — Beautiful SVG line, bar, and donut charts (no Chart.js or Recharts needed)
• 📱 Fully Responsive — Works perfectly on desktop, tablet, and mobile
• ⚡ Lightning Fast — Built with Next.js 16 App Router + Turbopack
• 🎨 CSS Custom Properties — Easy theming with a complete design token system
• 🔤 Inter Font — Clean, modern typography from Google Fonts
• 🎯 SEO Optimized — Proper meta tags, semantic HTML, heading hierarchy
• 🧩 Modular Components — Reusable, well-organized component architecture

📄 Pages Included

Page	Route	Description
Dashboard	/	Overview with stats, revenue chart, orders table, activity feed
Analytics	/analytics	Traffic patterns, top pages, country breakdown
Users	/users	User management with search, roles, status badges
Settings	/settings	Profile editing, notifications, danger zone
Login	/login	Beautiful split-screen auth with floating animations

🧱 Components

• Sidebar — Collapsible navigation with sections, badges, and user profile
• Header — Search bar, notifications with dot indicator, theme toggle
• Stats Grid — 4 KPI cards with trend indicators and animated entrance
• Revenue Chart — SVG line chart with gradient fill and smooth bezier curves
• Donut Chart — SVG donut with interactive segments and legend
• Bar Chart — Responsive bar chart with hover effects
• Data Table — Styled table with avatars, status badges, and hover rows
• Activity Feed — Timeline with color-coded events
• Progress Bars — Gradient-filled progress indicators
• Buttons — Primary, secondary, icon, and size variants
• Badges — Success, warning, danger, info status indicators
• Form Inputs — Styled inputs with focus states
• Toggle Switches — CSS-only notification toggles

🚀 Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

Open http://localhost:3000 to see the dashboard.

📁 Project Structure

src/
├── app/
│   ├── components/
│   │   ├── Icons.js          # Zero-dependency SVG icon library
│   │   ├── Sidebar.js        # Navigation sidebar
│   │   ├── Header.js         # Top header bar
│   │   ├── StatsGrid.js      # KPI stats cards
│   │   ├── RevenueChart.js   # SVG line chart
│   │   ├── DonutChart.js     # SVG donut chart
│   │   ├── RecentOrders.js   # Orders data table
│   │   └── ActivityFeed.js   # Activity timeline
│   ├── analytics/
│   │   └── page.js           # Analytics page
│   ├── users/
│   │   └── page.js           # Users management page
│   ├── settings/
│   │   └── page.js           # Settings page
│   ├── login/
│   │   ├── page.js           # Login page
│   │   └── login.css         # Login-specific styles
│   ├── globals.css            # Complete design system
│   ├── layout.js              # Root layout
│   └── page.js                # Dashboard home page

🎨 Customization

Theming

All colors, spacing, and design tokens are defined as CSS custom properties in globals.css. Change the entire look by modifying the :root variables:

:root {
  --accent-primary: #6c5ce7;      /* Change primary brand color */
  --accent-secondary: #00cec9;    /* Change secondary color */
  --bg-primary: #0a0a1a;          /* Change background */
  --radius-md: 12px;              /* Change border radius */
}

Adding New Pages

1. Create a new folder under src/app/
2. Add a page.js file with your content
3. Import Sidebar and Header for consistent layout
4. Add navigation link in Sidebar.js

Connecting to APIs

Replace the static data in components with your API calls. Each component uses clean data structures that are easy to map to any backend.

🛠️ Tech Stack

• Framework: Next.js 16 (App Router)
• Language: JavaScript (React)
• Styling: Vanilla CSS (CSS Custom Properties)
• Fonts: Inter (Google Fonts)
• Icons: Inline SVG (zero dependencies)
• Charts: Custom SVG (zero dependencies)

📦 What's NOT Included (By Design)

• ❌ No Tailwind CSS — keeps the template lightweight and customizable
• ❌ No Chart.js/Recharts — custom SVG charts are lighter and more customizable
• ❌ No icon library — inline SVGs keep the bundle tiny
• ❌ No CSS-in-JS — vanilla CSS is fastest and most portable

💳 Support & Direct License Purchase

If you use this template or want to purchase a commercial license directly, you can pay via UPI (India) or Crypto (Global):

🇮🇳 For India (UPI — Zero Fees):

• Personal License: ₹999
• Commercial / Team License: ₹2,499
• UPI ID: shashankkaramudi@ibl
• Instant Activation / Proof: Send payment screenshot directly to WhatsApp: +91 9980955236
• Scan & Pay: Pay via any UPI app (GPay, PhonePe, Paytm, CRED).

🌐 For Global Buyers (On-Chain Crypto):

• Personal License: $29 USDC / USDT / ETH
• Commercial / Team License: $79 USDC / USDT / ETH
• EVM Address (Base / Arbitrum / Polygon / Ethereum): 0x49e03383285eEef3927E12D88c1227f059BbD42d
• Instant Receipt: Confirm tx hash via WhatsApp: +91 9980955236

---

📜 License

This is a commercial template. You may:

• ✅ Use it in unlimited personal and commercial projects
• ✅ Modify and customize it freely
• ❌ Redistribute or resell the template itself
• ❌ Share your download with others

---

Built by Shashank Karamudi. High-performance engineering for modern web applications.