Dashboard Template

A complete admin / dashboard layout for authed products. Sidebar nav, top bar, stat cards, charts, and a recent activity table — all the structure you need to ship a B2B product.

Install#

npx @aidimension/cli@latest add template dashboard

This creates:

• src/app/(templates)/dashboard/page.tsx — the main shell
• src/app/(templates)/dashboard/analytics/page.tsx — analytics sub-page
• src/app/(templates)/dashboard/settings/page.tsx — settings sub-page
• src/components/dashboard/ — sidebar, topbar, and supporting components

What's included#

The dashboard ships with:

Layout#

• Collapsible sidebar (icon-only when collapsed)
• Top bar with breadcrumbs, search, and user menu
• Main content area with proper padding and max-width
• Responsive — sidebar becomes a sheet on mobile

Pages#

1. Overview — 4 stat cards, time-series chart, recent activity table
2. Analytics — 6 stat cards, line chart, bar chart, traffic sources
3. Customers — full data table with search, filters, pagination
4. Products — grid view of product cards
5. Settings — tabs for Profile, Security, Billing, Notifications

Customize#

Brand#

Replace the logo and brand name:

// sidebar.tsx
<Link href="/dashboard">
  <img src="/logo.svg" alt="Acme" className="h-7" />
  <span>Acme</span>
</Link>

Navigation#

Edit the nav items in src/components/dashboard/sidebar.tsx:

const nav = [
  { label: "Overview", href: "/dashboard", icon: Home },
  { label: "Analytics", href: "/dashboard/analytics", icon: BarChart },
  { label: "Customers", href: "/dashboard/customers", icon: Users },
  // ...
];

Stat cards#

Replace the 4 hardcoded values with real data:

<Card>
  <CardHeader>
    <CardDescription>Revenue</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="text-2xl font-bold">{formatCurrency(revenue)}</div>
    <p className="text-xs text-success">+{growth}% from last month</p>
  </CardContent>
</Card>

Charts#

The template uses Recharts (already installed). Replace the placeholder data with your own:

import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";

<ResponsiveContainer width="100%" height={300}>
  <LineChart data={data}>
    <XAxis dataKey="date" />
    <YAxis />
    <Tooltip />
    <Line type="monotone" dataKey="value" stroke="var(--color-primary)" />
  </LineChart>
</ResponsiveContainer>

Data tables#

The customers page uses the DataTable component. It supports:

<DataTable
  columns={[
    { key: "name", label: "Name", sortable: true },
    { key: "email", label: "Email" },
    { key: "status", label: "Status", render: (s) => <Badge>{s}</Badge> },
  ]}
  data={customers}
  search
  pagination
  pageSize={20}
/>

Sidebar collapse#

The sidebar collapse state is stored in localStorage. To reset:

localStorage.removeItem("dashboard-sidebar-collapsed");

Mobile#

On screens < 1024px:

• Sidebar becomes a slide-in sheet
• Triggered by a hamburger button in the top bar
• Backdrop dismisses on click

Performance#

• ✅ Server Components for all pages
• ✅ Client Components only for the sidebar collapse state and search input
• ✅ Recharts loaded only on pages that use it
• ✅ ~25 KB gzipped

Auth#

The template doesn't include auth. To add it, wrap the dashboard layout with a session check:

// app/(templates)/dashboard/layout.tsx
import { redirect } from "next/navigation";
import { auth } from "@/lib/auth";

export default async function DashboardLayout({ children }) {
  const session = await auth();
  if (!session) redirect("/login");
  return <>{children}</>;
}

Works with any auth library: NextAuth, Clerk, Auth.js, custom.

Next steps#

• Landing Page template — for the public site
• Pricing template — for the public pricing
• Templates overview — all 6 templates