How I Built a Modern AI SaaS Dashboard with Next.js 15, Tailwind CSS & Recharts
Most SaaS founders spend months building their dashboard UI before writing a single line of business logic.
That's backwards.
I built NeuroDash — a complete AI SaaS dashboard template so you can skip straight to building your product.
Live Demo: https://neurodash-dashbord.vercel.app/
🚀 What's Inside
- Analytics dashboard with revenue and KPI charts
- AI generation dashboard with credit tracking
- User management with search and filters
- Billing and subscription pages
- Authentication pages (login, signup, forgot password)
- Settings and team management
- Dark and light mode
- Fully responsive
🛠 Tech Stack
- Next.js 15 + React 19
- Tailwind CSS
- Recharts (Charts)
- Lucide React (Icons)
📊 The Analytics Cards
The stat cards are the first thing users see. Here's the component:
export function StatCard({ title, value, change, trend, icon }) {
return (
<div className="p-6 bg-surface-800 border border-white/10 rounded-2xl">
<div className="flex items-center justify-between mb-4">
<span className="text-slate-400 text-sm">{title}</span>
<div className="w-10 h-10 bg-brand-500/10 rounded-xl flex items-center justify-center">
{icon}
</div>
</div>
<div className="text-3xl font-bold text-white mb-2">
{value}
</div>
<div
className={`text-sm ${
trend === "up" ? "text-green-400" : "text-red-400"
}`}
>
{trend === "up" ? "↑" : "↓"} {change} vs last month
</div>
</div>
);
}
📈 Revenue Chart with Recharts
Getting Recharts to look good on dark backgrounds took some work.
<AreaChart data={revenueData}>
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#14b575" stopOpacity={0.3} />
<stop offset="95%" stopColor="#14b575" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid
strokeDasharray="3 3"
stroke="rgba(255,255,255,0.05)"
/>
<XAxis
stroke="#64748b"
tick={{ fill: "#64748b" }}
/>
<YAxis
stroke="#64748b"
tick={{ fill: "#64748b" }}
/>
<Tooltip
contentStyle={{
backgroundColor: "#1e293b",
border: "1px solid rgba(20,181,117,0.2)",
borderRadius: "12px",
}}
/>
<Area
dataKey="revenue"
stroke="#14b575"
strokeWidth={2}
fill="url(#gradient)"
/>
</AreaChart>
The key is using:
stroke="rgba(255,255,255,0.05)"
on the CartesianGrid. The default grid lines don't look great on dark themes.
🌙 Dark & Light Mode
Next.js 15 with next-themes makes theme switching straightforward.
// layout.tsx
import { ThemeProvider } from "next-themes";
export default function RootLayout({ children }) {
return (
<html suppressHydrationWarning>
<body>
<ThemeProvider
attribute="class"
defaultTheme="dark"
>
{children}
</ThemeProvider>
</body>
</html>
);
}
The suppressHydrationWarning prop is important. Without it, you'll likely encounter hydration warnings when switching themes.
⚙️ One Config File
Everything is customizable from one place.
// src/config.ts
export const config = {
brand: {
name: "Your SaaS",
color: "#14b575",
},
sidebar: {
items: [
"Dashboard",
"Analytics",
"Users",
"Billing",
"Settings",
],
},
};
💡 What I Learned
- Recharts' default styles don't look great on dark mode, so it's worth customizing the colors.
suppressHydrationWarningis important when usingnext-themes.- Save sidebar state in
localStorageso users keep their preferences. - On mobile, use horizontal scrolling for tables instead of squeezing columns.
🎉 The Result
Live Demo
https://neurodash-dashbord.vercel.app/
I turned this into a production-ready template featuring:
- 8+ complete dashboard pages
- Full TypeScript support
- Responsive layouts
- Clean architecture
- Documentation
Get NeuroDash
https://pixelanas.gumroad.com/l/neuro-dash
Questions or feedback? Drop them in the comments! 👇
SOCIAL SHARE CARD GENERATOR