Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.auction-rise.com/llms.txt

Use this file to discover all available pages before exploring further.

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

KeyDefaultDescription
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

Adding Sidebar Navigation Items

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

VariableDescription
NEXT_PUBLIC_SUPABASE_URLSupabase project URL
NEXT_PUBLIC_SUPABASE_ANON_KEYSupabase anon key
SUPABASE_SERVICE_ROLE_KEYSupabase service role key (server only)
NEXT_PUBLIC_APP_URLBase URL (e.g., https://myapp.com)

Email (Resend)

VariableDescription
RESEND_API_KEYResend API key
RESEND_FROM_EMAILVerified sender address
RESEND_SMTP_PASSWORDFor Supabase SMTP relay (production only)

Billing (Stripe)

VariableDescription
STRIPE_SECRET_KEYStripe secret key
STRIPE_WEBHOOK_SECRETWebhook signing secret

Cron

VariableDescription
CRON_SECRETUsed 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:
TokenUse for
text-foregroundPrimary text
text-muted-foregroundSecondary / hint text
bg-backgroundPage background
bg-cardCard surfaces
border-borderBorders and dividers
bg-primary / text-primaryBrand / action color
text-destructiveError and destructive states

Key Layout Tokens

TokenValueUse
--header-heightset by layoutTop header offset
--sidebar-widthset by SidebarProviderExpanded sidebar width
--z-header20Authenticated chrome
--z-modal50Modals and dialogs

PageContainer Sizes

The PageContainer component wraps page content with a max-width:
SizeMax Width
compactmax-w-2xl
narrowmax-w-4xl
mediummax-w-5xl
defaultmax-w-6xl
widemax-w-7xl
fullno max-width