Wails + SvelteKit + shadcn-svelte Template

A Wails v2 template using SvelteKit, Tailwind CSS v4, and shadcn-svelte components.

Features

• SvelteKit - Full-featured Svelte framework with file-based routing
• Tailwind CSS v4 - Utility-first CSS framework
• shadcn-svelte - Beautiful, accessible UI components
• TypeScript - Full type safety
• pnpm - Fast, disk space efficient package manager

Usage

wails init -n myapp -t /path/to/wails-svelte-template
cd myapp
wails dev

Or from a GitHub URL:

wails init -n myapp -t https://github.com/xavierchanth/wails-svelte-template

Project Structure

myapp/
├── frontend/
│   ├── src/
│   │   ├── lib/
│   │   │   ├── components/ui/  # shadcn-svelte components
│   │   │   ├── wailsjs/        # Auto-generated Wails bindings
│   │   │   └── utils.ts        # cn() helper for Tailwind
│   │   ├── routes/
│   │   │   ├── +layout.svelte
│   │   │   ├── +layout.ts      # prerender=true, ssr=false
│   │   │   └── +page.svelte
│   │   ├── app.css             # Tailwind + shadcn theme
│   │   ├── app.html            # Wails runtime scripts
│   │   └── hooks.client.ts     # Error handler
│   ├── components.json         # shadcn-svelte config
│   ├── svelte.config.js        # Static adapter
│   └── package.json
├── app.go                      # Go backend methods
├── main.go                     # Wails app entry
└── wails.json

Development

# Start development server with hot reload
wails dev

# Build for production
wails build

# Add shadcn-svelte components
cd frontend && pnpm dlx shadcn-svelte@latest add button

Important Notes

Navigation

Always use SvelteKit's goto() from $app/navigation instead of window.location.href to prevent losing the Wails runtime.

import { goto } from '$app/navigation';
goto('/some/page');

No Server Routes

SvelteKit server features are disabled. Do not use:

• +page.server.ts
• +layout.server.ts
• +server.ts

All backend logic should be in Go (see app.go).

Calling Go from Svelte

Import your Go functions from the generated bindings:

import { Greet } from '$lib/wailsjs/go/main/App';

const greeting = await Greet('World');

Adding Components

cd frontend
pnpm dlx shadcn-svelte@latest add button
pnpm dlx shadcn-svelte@latest add card
pnpm dlx shadcn-svelte@latest add dialog

See shadcn-svelte docs for available components.