Skip to main content
Skip to content
Template Empire
SaaS Starterv1.14.76
Live DemoView template

Last updated on 4 June 2026

Customisation

Buyer-facing brand, legal, and compliance settings live in src/lib/site-config.ts. Kiln edition tokens live in src/themes/kiln.css; shared global defaults, focus rings, and typography helpers live in src/app/globals.css.

1. Brand (single-file rebrand)

Open src/lib/site-config.ts and replace the values:

ts
export const SITE_CONFIG = {
  productName: 'YourProduct',
  brandName: 'Your Brand',
  productTagline: 'The short pitch', // or '' to hide
  companyName: 'YourCompany Ltd',
  legalEffectiveDate: '2026-06-01',
  legalEntity: {
    companyName: 'YourCompany Ltd',
    companyNumber: '12345678',
    placeOfRegistration: 'England and Wales',
    registeredAddress: '1 Example Street, London, EC1A 1AA',
  },
  contact: {
    support: 'support@yourproduct.com',
    privacy: 'privacy@yourproduct.com',
    legal: 'legal@yourproduct.com',
    security: 'security@yourproduct.com',
  },
};

All of these propagate automatically to:

  • Auth pages (src/app/(auth)/layout.tsx)
  • Legal pages (src/app/(marketing)/privacy/, terms/, cookie-policy/, accessibility/, dmca/, do-not-sell/)
  • Email templates (src/lib/email/)
  • Metadata / <title> tags

Other high-impact switches in the same file:

  • SITE_CONFIG.auth controls email/password, magic link, OAuth, registration, and email verification surfaces.
  • SITE_CONFIG.commerce controls whether billing and subscription navigation render.
  • SITE_CONFIG.regions controls US-specific legal links such as DMCA and Do Not Sell.
  • SITE_CONFIG.compliance controls deletion grace, audit retention, DSAR delivery mode, and privacy governance settings.
  • SITE_CONFIG.urls controls the public docs, support, changelog, and social/footer links.
  • SITE_CONFIG.apiKeys controls generated API-key prefixes and accepted legacy prefixes.
  • SITE_CONFIG.cookieConsent controls the banner title, body, button labels, and policy URL. Consent recall duration is defined in src/lib/compliance/consent.ts.
  • SITE_CONFIG.uploads controls local/S3/R2 upload behaviour and file limits.

2. Colours & accent hue

Accent surfaces use OKLCH tokens in the active Kiln theme. Change --accent in src/themes/kiln.css, and update --primary / --primary-foreground in src/app/globals.css if you want primary buttons to move with the same brand hue:

css
:root {
  --accent: oklch(0.72 0.18 60); /* hue 60 = amber. Change the last number. */
}

Hue reference:

  • 0-20 = red/coral
  • 30-50 = orange/amber
  • 60-90 = yellow/olive
  • 100-160 = green
  • 180-220 = cyan/blue
  • 240-280 = indigo/violet
  • 290-340 = magenta/rose

3. Fonts

Display font (headings) is set with CSS variables, so buyer builds do not need remote font fetches. Change the stack in src/themes/kiln.css:

css
:root {
  --font-display-family: Manrope, ui-sans-serif, system-ui, sans-serif;
}

If you want a custom typeface, commit licensed font files and load them locally (for example with next/font/local). Do not add remote font loaders to the buyer build path.

Replace src/app/icon.svg, src/app/favicon.ico (browser icons), and public/logo.svg if you want a file-based logo. The default header/sidebar brand text reads SITE_CONFIG.brandName.

5. Legal pages

The legal pages in src/app/(marketing)/privacy/, terms/, cookie-policy/, accessibility/, dmca/, and do-not-sell/ are marked /* DEMO_CONTENT */. Review and replace them with your own legal text. They read company name, registered office, and contact emails from site-config.ts, so you do NOT need to replace those strings - just the body copy and any product-specific policy language.

Important: These pages are placeholder content. Have a lawyer review before shipping publicly.

6. Demo content

Files marked /* DEMO_CONTENT */ contain demo data that should be replaced before shipping:

  • src/components/landing/testimonials.tsx - proof/value-prop placeholder content
  • src/components/landing/stats-bar.tsx - Template Empire demo metrics; hidden in buyer builds unless NEXT_PUBLIC_TE_DEMO=true
  • src/components/landing/features.tsx, hero.tsx, faq.tsx, how-it-works.tsx, pricing-table.tsx, logo-ticker.tsx, cta-banner.tsx - demo marketing copy
  • src/app/(marketing)/docs/page.tsx - placeholder product-support documentation surface
  • src/lib/billing/plans.ts - placeholder plan names, prices, features, and limits
  • src/lib/db/seed.ts - demo users and billing data

Grep for DEMO_CONTENT to find them all:

bash
grep -r "DEMO_CONTENT" src/

7. Routes

Public (marketing) routes are under src/app/(marketing)/. Authenticated routes are under src/app/(dashboard)/. Auth routes (login/register) are under src/app/(auth)/.

To remove a route, delete its folder. Next.js App Router will drop it from the build automatically.

8. Email templates

Email templates live in src/lib/email/. They are typed builder functions such as verificationEmail(verifyUrl), passwordResetEmail(resetUrl), magicLinkEmail(loginUrl), plus billing/usage templates under src/lib/email/templates/. Company name and product name read from SITE_CONFIG so no per-template edits are needed unless you want different copy or layout.

Transactional email is sent via Nodemailer (SMTP). Configure SMTP_* in .env before production launch. Without SMTP, emails log to console in dev only.

9. SEO metadata

Base metadata is in src/app/layout.tsx. Per-page metadata is in each page's export const metadata. All pages use SITE_CONFIG.productName in the title, so updating the config propagates everywhere.

10. Footer links

Footer links live in src/components/landing/footer.tsx. Product links are intentionally minimal by default; legal links are generated from SITE_CONFIG region and compliance settings.

11. Dashboard widgets

Dashboard widgets live in src/app/(dashboard)/dashboard/page.tsx. They read from /api/dashboard/* endpoints. Add or remove widgets by editing the page; the API endpoints are standalone route handlers in src/app/api/dashboard/.

12. Pricing

Pricing plans live in src/lib/billing/plans.ts. The marketing pricing table and seed script both read from that catalog, so plan names, slugs, limits, and display copy stay aligned.

Stripe Price IDs go in .env (STRIPE_PRICE_ID_*) and are looked up by plan slug at checkout.

Checklist before shipping publicly

  • Updated src/lib/site-config.ts with your real brand and contact emails
  • Replaced legal pages (privacy, terms, cookie policy, accessibility, DMCA, and Do Not Sell) with lawyer-reviewed copy
  • Replaced demo testimonials, stats, pricing, and FAQ copy
  • Replaced logo + favicon
  • Generated production JWT_SECRET and OAUTH_STATE_SECRET
  • Configured SMTP for transactional email
  • Set up Stripe keys + webhook endpoint (if billing enabled)
  • Ran pre-flight checks: pnpm typecheck && pnpm lint && pnpm build && pnpm audit:prod (all green)
  • Replaced your SEED_PASSWORD (if DEMO_MODE=true on public deployment)