Svelte Service Business Template

A production-ready SvelteKit website template for service businesses — plumbing, HVAC, roofing, landscaping, and similar trades. Built as a pnpm monorepo with a Sanity CMS back-end and Vercel deployment.

What's included

• All core page types: Home, Services (list + detail), About, Blog (list + detail), Service Areas, FAQ, Contact, Thank You
• Lead handling: Contact and quote forms with server-side validation, Cloudflare Turnstile spam protection, and Resend email delivery
• HTML email templates: Owner notification + customer confirmation for both contact and quote submissions, compatible with Gmail, Outlook, and Apple Mail
• Sanity CMS: Full schema for all content types, seed data for local development, Sanity Studio embedded at /studio
• Section component library: Hero, TrustBar, ServiceCard, TestimonialCard, ReviewGrid, ProcessSteps, FaqAccordion, CtaBand, BlogCard, ServiceAreaGrid, TeamMemberCard, PortableText
• Optional extensions: HubSpot, Pipedrive, Calendly, Square Appointments, Stripe deposits, Better Auth — all off by default, zero overhead when unused
• Tailwind CSS v4: CSS-first @theme configuration, no tailwind.config.ts
• TypeScript strict mode throughout

Project structure

svelte-service-template/
├── apps/
│   └── web/                     ← SvelteKit app (adapter-vercel)
│       ├── src/
│       │   ├── lib/
│       │   │   ├── components/  ← UI, section, form, and extension components
│       │   │   ├── config/      ← Feature flags (features.ts)
│       │   │   ├── extensions/  ← CRM, payment, auth extension modules
│       │   │   ├── sanity/      ← Sanity clients and GROQ queries
│       │   │   ├── server/      ← Server-only: email, validation, lead-handler
│       │   │   └── types/       ← Shared TypeScript types
│       │   └── routes/          ← SvelteKit routes
│       └── .env.example         ← All supported environment variables
├── packages/
│   └── sanity/                  ← Sanity schema package + seed data
│       ├── schemas/             ← Document and object type definitions
│       └── seed/                ← Seed data + import script
└── docs/
    └── extensions/              ← Setup guides for each optional extension

Quick start

Prerequisites

• Node.js 20+
• pnpm 9+
• A Sanity account (free tier works)
• A Resend account for email
• A Cloudflare account for Turnstile (free)

1. Clone and install

git clone <repo-url> my-project
cd my-project
pnpm install

2. Create a Sanity project

cd packages/sanity
npx sanity init --bare
# Note the project ID

3. Configure environment variables

cp apps/web/.env.example apps/web/.env
cp packages/sanity/.env.example packages/sanity/.env

Fill in both .env files. At minimum you need:

• SANITY_PROJECT_ID / PUBLIC_SANITY_PROJECT_ID
• SANITY_API_TOKEN
• RESEND_API_KEY + RESEND_FROM_EMAIL + RESEND_OWNER_EMAIL
• TURNSTILE_SECRET_KEY + PUBLIC_TURNSTILE_SITE_KEY (use test keys for dev)

4. Seed Sanity with sample content

cd packages/sanity
pnpm seed

5. Start the dev server

# From the repo root:
pnpm --filter web dev

# Or from apps/web:
cd apps/web && pnpm dev

Open http://localhost:5173. The Sanity Studio is at http://localhost:5173/studio.

Customization

Branding

Edit the CSS theme tokens in apps/web/src/app.css:

@theme {
  --color-brand-primary: oklch(55% 0.2 250);   /* primary brand color */
  --font-display: 'Your Font', sans-serif;
  /* ... */
}

Business information

Update apps/web/.env with SITE_BUSINESS_NAME, SITE_PRIMARY_PHONE, etc. These are used in email templates.

For CMS-driven content, update the siteSettings document in Sanity Studio.

Services

Add your actual services in Sanity Studio under Services. Each service gets its own page at /services/{slug}.

Adding optional extensions

See docs/extensions/README.md for the full list of optional integrations and setup guides.

Deployment

Vercel (recommended)

1. Push to GitHub.
2. Import the repository in the Vercel Dashboard.
3. Set the Root Directory to apps/web.
4. Add all environment variables from apps/web/.env.
5. Deploy.

The project uses @sveltejs/adapter-vercel and includes a vercel.json at the repo root.

Environment variables on Vercel

All PUBLIC_ prefixed variables must also be added to Vercel — they are not automatically public.

Tech stack

Layer	Technology
Framework	SvelteKit 2 + Svelte 5
Language	TypeScript (strict)
Styling	Tailwind CSS v4
CMS	Sanity v3
Email	Resend
Spam protection	Cloudflare Turnstile
Package manager	pnpm workspaces
Deployment	Vercel (adapter-vercel)

License

MIT