Customisation

The template is a complete SaaS website. Most buyers want most of it. The few that don't can delete what they don't use — every opt-out has a documented deletion path.

Where buyers customise (in order of "first touch")

1. src/template.config.ts — name, URL, contact email, locales, theme defaults, feature flags. Nothing else in the codebase reads brand values from anywhere else.
2. .env.local — Supabase, Stripe, Resend keys.
3. src/locales/en.ts (and the 9 others) — copy. Use /i18n-sync to keep locale files aligned.
4. app/(public)/page.tsx — section ordering on the landing.
5. src/screens/landing/*.tsx — visual changes per landing section.
6. src/index.css — base theme tokens (CSS variables).
7. src/lib/plans.ts — pricing tiers.
8. src/utils/color-presets.ts — extend or replace presets.

Adding a new locale

Three steps:

// 1. src/locales/de.ts
const deLocales = {
  nav: { home: 'Startseite' /* ... */ },
};
export default deLocales;

// 2. src/template.config.ts → LANGUAGES (add an entry)
{ value: 'de', label: 'Deutsch', icon: '/assets/icons/flags/ic_flag_de.svg' },

// 3. src/locales/i18n.ts → register
import de from './de';
i18n.addResourceBundle('de', 'translation', de);

Drop a flag SVG at public/assets/icons/flags/ic_flag_de.svg. The header switcher and sitemap pick it up automatically.

Adding your own resource (CRUD)

The Posts module is the worked example. Pattern:

1. Add the model to prisma/schema.prisma.
2. Write a paired raw SQL migration that enables RLS + explicit policies. Add a row to RLS_EXPECTATIONS in src/lib/rls.ts.
3. Define Zod schemas in src/lib/<resource>.ts. Keep this module free of prisma/server-only imports so the form (a client component) can re-use the schema.
4. Build the route handlers under app/api/<resource>/route.ts (public) and app/api/admin/<resource>/route.ts (admin write).
5. Build the screens under src/screens/<area>/.
6. Wire pages, paths, and the admin sidebar entry.
7. Write at least one e2e spec covering the public read + admin write.

bun run verify:rls will fail if the policies on the new table drift from RLS_EXPECTATIONS.

Deletion paths (opt-out features)

Remove the blog

# In src/template.config.ts:
FEATURES.blog = false

The footer link disappears, the /blog route stops building (it reads the flag), the admin Posts editor is hidden. Optional cleanup — delete prisma/migrations/0005_posts.sql and app/(public)/blog/.

Remove the admin panel entirely

Delete:

• app/admin/ (the whole route group)
• src/screens/admin/
• src/components/admin/
• app/api/admin/

The RoleBasedGuard and requireAdmin helpers stay (they are pure helpers, no cost) but no route imports them after the deletion.

Remove auth + billing entirely

This is a non-trivial fork — see the Kettle & Co customer story for a real-world example. Documented path:

1. Delete app/(auth)/, app/(app)/, app/admin/.
2. Delete app/api/auth/, app/api/me/, app/api/admin/, app/api/stripe/.
3. Delete src/contexts/jwt-session-context.tsx and the auth hooks.
4. Update src/screens/landing/landing-header.tsx to drop the auth CTA.

The public marketing surface stays intact.

Theme tokens

The template uses CSS variables for the entire theme. They live under the :root block in src/index.css. The Theme Studio at /settings/theme writes the user's picks back to localStorage, which is read by src/contexts/settings-context.tsx on boot.

To change the brand defaults (what visitors see before they touch the Theme Studio):

// src/template.config.ts
export const defaultSettings: SettingsValueProps = {
  themeMode: 'system',
  themeColorPresets: 'blue', // ← change me
  themeFontSize: 16,
  /* ... */
};

If you want to drop the Theme Studio entirely, set FEATURES.themeStudio = false. The header switcher disappears and the /settings/theme route stops building.