How I Built a Premium AI SaaS Dashboard with Next.js 15, Tailwind CSS and Recharts

#webdev #react #nextjs #tailwindcss

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.
suppressHydrationWarning is important when using next-themes.
Save sidebar state in localStorage so users keep their preferences.
On mobile, use horizontal scrolling for tables instead of squeezing columns.