I Spent 3 Days Building a SaaS Admin Dashboard Template in Next.js — Here's Everything I Learned

After 3 days of coding, debugging, and obsessing over pixel-perfect UI, I shipped Nexus UI — a free SaaS Admin Dashboard template built with Next.js 16, TypeScript, and SCSS Modules.

Here's what I built, why I made certain decisions, and what I'd do differently.

What I Built

Nexus UI is a fully responsive SaaS admin dashboard template with:

📊 Multiple chart types — Revenue line chart, Donut chart, Area chart (Recharts)
🗂️ Collapsible sidebar with mobile support
📄 5 pre-built pages — Dashboard, Analytics, Users, Orders, Settings
🌗 Dark/Light mode toggle
🧩 Reusable UI components — StatCard, Badge, Button, Table, ProgressBar, Input, Avatar
🔐 Auth pages — Login & Register
⚡ Framer Motion animations throughout
📱 Fully responsive layout

Tech Stack & Why

Next.js 16 + TypeScript

App Router is the future. I wanted to build something production-ready, not a toy project. TypeScript means every component is typed — no runtime surprises.

SCSS Modules (not Tailwind)

Hot take: Tailwind is great for prototyping, but for a template you sell, SCSS Modules are better. Why?

Buyers can actually understand and customize the styles
No purge config headaches
Each component has its own .module.scss — clean, isolated, no global conflicts

Recharts over Chart.js

Recharts is React-native. No useEffect hacks to initialize a canvas. Just components. The ResponsiveContainer wrapper handles resizing automatically — this saved me hours of responsive debugging.

Framer Motion

Every dashboard feels the same without animation. I added subtle fadeUp and stagger animations on page load. The result? It feels alive. Buyers notice this immediately.

The Hardest Part: Collapsible Sidebar

The sidebar was the most complex piece. It needed to:

Collapse to icon-only mode on desktop
Open as an overlay on mobile
Remember state across page navigation
Not break the layout when toggling

The solution was lifting state to DashboardLayout and passing isCollapsed + isMobileOpen as props. Simple in hindsight, but it took trial and error to get the CSS transitions right without layout shift.

tsx// DashboardLayout.tsx
const [isCollapsed, setIsCollapsed] = useState(false);
const [isMobileOpen, setIsMobileOpen] = useState(false);

return (

isCollapsed={isCollapsed}
onToggle={() => setIsCollapsed(!isCollapsed)}
isMobileOpen={isMobileOpen}
/>

{children}


);

Dark Mode Without a Library

I skipped next-themes and built a simple ThemeContext myself:

tsx// theme-context.tsx
const [theme, setTheme] = useState<'light' | 'dark'>('dark');

useEffect(() => {
document.documentElement.setAttribute('data-theme', theme);
}, [theme]);

Then in SCSS:

scss:root[data-theme='dark'] {
--bg-primary: #0f1117;
--text-primary: #ffffff;
}

:root[data-theme='light'] {
--bg-primary: #f8fafc;
--text-primary: #0f1117;
}

Zero dependencies. Full control. Works perfectly.

What I'd Do Differently

Add a package.json with all deps listed — buyers asked about this
Include a README with setup instructions — obvious in hindsight
Add more chart variations — I underestimated how much people want different chart styles
Build a live demo first — screenshots sell less than a live URL

I Also Built a Paid Template

After Nexus UI, I built MediBook Pro — a Doctor Booking System template ($79).

It includes:

Full multi-step booking flow with Framer Motion transitions
Doctor listing & profile pages
Admin dashboard with appointment management
Patient dashboard
Auth pages (Login + Register)
Animated counters, testimonials, feature sections

Both templates use the same stack: Next.js 16 + TypeScript + SCSS Modules + Framer Motion.

Get the Templates

🆓 Nexus UI (Free) → irtaza78.gumroad.com/l/kuahry | Live Demo
💊 MediBook Pro ($79) → irtaza78.gumroad.com/l/cuvuqwn | Live Demo

If you use either template, drop a comment — I'd love to see what you build with it.

Building more templates. Follow me here for updates