Customization

Treat this repo like a fork-friendly product: branding, copy, pricing tables, emails, and legal text all live in config files or obvious folders so you are not hunting magic strings across node_modules.

Branding (name, company, links)

Edit src/config/brand.ts to update:

• Product name
• Company name
• Support, privacy, legal, and DPO emails
• Social media links (LinkedIn, Twitter/X, GitHub)
• Footer copyright text
• Marketing trust line

// src/config/brand.ts
export const BRAND = {
  productName: "YourApp",
  companyName: "Your Company",
  supportEmail: "support@yourcompany.com",
  // ...
};

Logo assets

Place your logos in public/ and update the paths in src/config/ui/branding.ts.

The template supports:

• Light mode logo -- used on light backgrounds
• Dark mode logo -- used on dark backgrounds
• Compact/mobile logo -- smaller variant for mobile navigation

UI copy and marketing content

Most marketing and UI copy is centralized in src/config/ui/:

To change marketing page content, edit these config files rather than modifying the page components directly.

Theme and colors

The color theme is controlled via CSS variables in src/app/globals.css. SaaSForge Core uses the oklch color space for consistent rendering.

Changing the primary color

Update the --primary CSS variable in both light and dark themes:

/* src/app/globals.css */
:root {
  --primary: 0.65 0.24 260;  /* Your primary color in oklch */
}

.dark {
  --primary: 0.75 0.20 260;  /* Adjusted for dark mode */
}

When changing --primary, make sure your logo works on both light and dark backgrounds.

Dark mode

Dark mode is handled automatically via next-themes. The theme toggle is in the header. No additional configuration is needed.

Pricing configuration

Plan names, prices, features, and limits are defined in src/config/pricing.ts:

• Plan tier names (Starter, Pro, Enterprise)
• Feature lists per plan
• Seat and record limits
• Stripe price ID mappings

Routes

Route constants are defined in src/config/routes.ts. When adding new pages, register their routes here for consistent URL generation across the app.

Docs

Documentation files live in content/docs/*.mdx. The navigation structure and metadata are in src/config/docs.ts.

Adding a new doc page

1. Create a new .mdx file in content/docs/
2. Add an entry to DOCS_CONFIG in src/config/docs.ts:

{
  slug: "my-new-page",
  title: "My New Page",
  description: "What this page covers.",
  category: "features",
}

3. The page will be available at /docs/my-new-page automatically.

Doc categories

Reusable component systems

Data Table (src/components/data-table/)

A composable data table system built on @tanstack/react-table. Use it for any list page:

See the Products page for a complete usage example.

Activity Feed (src/components/activity-feed/)

Renders audit log entries as a human-readable timeline. Used on the dashboard and product detail pages.

• action-labels.ts -- maps action strings to display text. Update this when you add new features.

Dashboard components

• kpi-cards.tsx -- metric cards (customize the stats array)
• activity-chart.tsx -- 30-day area chart (Recharts + shadcn chart wrapper)
• quick-actions.tsx -- role-gated shortcut buttons

Sidebar navigation

The sidebar navigation is defined in src/components/dashboard/dashboard-layout-client.tsx. To add new pages to the sidebar:

1. Import the icon from lucide-react
2. Add an entry to the navigation array:

{ id: "tasks", label: "Tasks", href: `/w/${workspaceSlug}/tasks`, icon: CheckSquare },

Adding new features

When building on top of SaaSForge Core, you'll typically:

1. Create a database table with workspace_id scoping
2. Add RLS policies using the helper functions
3. Create server actions following the authenticate -> authorize -> validate -> write -> audit pattern
4. Create page components using the existing UI patterns
5. Add to sidebar navigation
6. Register routes in src/config/routes.ts
7. Add action labels to the activity feed

For a complete walkthrough, see Adding Your Own Model.

Next steps

• White Label Checklist -- a practical checklist for shipping under your brand
• Adding Your Own Model -- replace Products with your entity