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 52 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 into any tracked file.
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:
Create src/routes/my-feature.tsx with createFileRoute('/my-feature')
Add the page content component
Add SEO metadata via the head export
Register the navigation link in src/routes/__root.tsx
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 into any committed file. Email templates for newsletter confirmation, contact form receipts, and auth notifications are in src/server/email/.
Each template is locale-aware — the active locale comes from the request URL.
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.
