Configuration

Nearly everything you need to customize when starting a new project lives in saas.config.ts at the project root.

saas.config.ts

export const saasConfig = {
  /** Display name used in page titles, auth screens, and headers */
  name: "My App",
  appName: "My App",

  /** Link to external docs site shown in sidebar footer. undefined = hidden */
  docsUrl: "https://docs.myapp.com",

  auth: {
    protectedRoutes: ["/dashboard", "/settings", "/workspaces", "/admin"],
    publicRouteOverrides: ["/invitations/accept"],
    authRoutes: ["/", "/auth/login", "/auth/register"],
    afterLoginRedirect: "/dashboard",
    loginPath: "/auth/login",
  },

  sidebar: {
    navItems: [
      // Add Lucide icon nodes here
      // { href: "/projects", label: "Projects", icon: <FolderOpen /> },
    ],
  },

  app: {
    url: process.env.NEXT_PUBLIC_APP_URL ?? "http://localhost:3000",
  },

  billing: {
    enabled: false,
    plans: [],
  },
};

Auth Routes Configuration

Key	Default	Description
`protectedRoutes`	`["/dashboard", ...]`	Prefixes that require authentication
`publicRouteOverrides`	`["/invitations/accept"]`	Paths under a protected prefix that are public
`authRoutes`	`["/", "/auth/login", ...]`	Paths that redirect to dashboard if already authed
`afterLoginRedirect`	`"/dashboard"`	Where to send users after sign-in
`loginPath`	`"/auth/login"`	Where to redirect unauthenticated users

Import a Lucide icon and add it to sidebar.navItems:

import { FolderOpen, BarChart2 } from "lucide-react";

sidebar: {
  navItems: [
    { href: "/projects", label: "Projects", icon: <FolderOpen /> },
    { href: "/analytics", label: "Analytics", icon: <BarChart2 /> },
  ],
},

Items render in SidebarNav below the default Dashboard link with built-in active state detection (pathname.startsWith(href)). Provide isActiveFn to override the default check.

Environment Variables

Copy .env.local.example to .env.local and fill in these values:

Required

Variable	Description
`NEXT_PUBLIC_SUPABASE_URL`	Supabase project URL
`NEXT_PUBLIC_SUPABASE_ANON_KEY`	Supabase anon key
`SUPABASE_SERVICE_ROLE_KEY`	Supabase service role key (server only)
`NEXT_PUBLIC_APP_URL`	Base URL (e.g., `https://myapp.com`)

Email (Resend)

Variable	Description
`RESEND_API_KEY`	Resend API key
`RESEND_FROM_EMAIL`	Verified sender address
`RESEND_SMTP_PASSWORD`	For Supabase SMTP relay (production only)

Billing (Stripe)

Variable	Description
`STRIPE_SECRET_KEY`	Stripe secret key
`STRIPE_WEBHOOK_SECRET`	Webhook signing secret

Cron

Variable	Description
`CRON_SECRET`	Used to authenticate Vercel cron calls

Design Tokens

All colors use semantic CSS custom properties defined in app/globals.css. Never hardcode Tailwind color classes like text-gray-900. Use tokens:

Token	Use for
`text-foreground`	Primary text
`text-muted-foreground`	Secondary / hint text
`bg-background`	Page background
`bg-card`	Card surfaces
`border-border`	Borders and dividers
`bg-primary` / `text-primary`	Brand / action color
`text-destructive`	Error and destructive states

Key Layout Tokens

Token	Value	Use
`--header-height`	set by layout	Top header offset
`--sidebar-width`	set by SidebarProvider	Expanded sidebar width
`--z-header`	20	Authenticated chrome
`--z-modal`	50	Modals and dialogs

PageContainer Sizes

The PageContainer component wraps page content with a max-width:

Size	Max Width
`compact`	`max-w-2xl`
`narrow`	`max-w-4xl`
`medium`	`max-w-5xl`
`default`	`max-w-6xl`
`wide`	`max-w-7xl`
`full`	no max-width

​Configuration

​saas.config.ts

​Auth Routes Configuration

​Adding Sidebar Navigation Items

​Environment Variables

​Required

​Email (Resend)

​Billing (Stripe)

​Cron

​Design Tokens

​Key Layout Tokens

​PageContainer Sizes