Customizing Your SaaS Template

The TANSHIP template gives you a complete SaaS foundation out of the box. But your product has its own identity, pricing, and workflows. Here is how to make the template your own.

Theming and Branding

The template includes 34 theme presets and a visual theme customizer. You can adjust colors, border radius, and light or dark mode defaults from the customizer panel.

For deeper changes, modify the CSS custom properties in src/styles.css. The design system follows shadcn/ui conventions — every component derives its appearance from a handful of semantic tokens like primary, secondary, accent, and muted.

Changing your brand color is a single variable update:

:root {
  --primary: hsl(262 83% 58%);
}

Replacing Pricing Plans

The pricing page is a working example you replace with your own offering. Open src/i18n/locales/en/landing.ts and find the pricing.plans section. Each plan — Free, Pro, Lifetime — has a name, description, and list of features.

Edit the feature arrays to reflect your actual SaaS plans. The price points and billing intervals are configured in src/features/landing/lib/public-pricing.ts.

The payment flow itself is production-ready. Configure your provider through environment variables in .env. Run pnpm cloudflare:sync-env to synchronize non-sensitive values to Cloudflare; API keys are uploaded automatically as secrets and never written to wrangler.jsonc.

Swapping Testimonials

The testimonial section on the landing page uses 12 placeholder entries. The names and avatar images live in src/features/landing/components/testimonials-section.tsx, while the roles and quotes come from the translation files under testimonials.items.

Replace each quote with feedback from your own customers. If you need fewer or more entries, adjust the testimonialMeta array in the component.

Adding Your Own Pages

TanStack Router uses file-based routing. Create a new file in src/routes/ and it becomes a route. For a feature page:

1. Create src/routes/my-feature.tsx with createFileRoute('/my-feature')
2. Add the page content component
3. Add SEO metadata via the head export
4. Register the navigation link in src/routes/__root.tsx
5. Run pnpm generate-routes to update the route tree

Configuring Email

The template uses Resend for transactional emails. Add your Resend API key as a secret using the project's environment sync — secrets are never written to wrangler.jsonc or any committed file. Email templates for newsletter confirmation, contact form receipts, and auth notifications are in src/server/email/.

Each template supports both English and Chinese — the locale is picked up from the user's request context automatically.

Next Steps

Once your brand, pricing, and content are in place, deploy to Cloudflare Workers using the project's deployment pipeline (pnpm cloudflare:sync-env → pnpm deploy:check → pnpm deploy:production). The full deployment guide walks through provisioning D1, R2, and going live.