Svelte Starter Kit Svelte

What's in the kit

The Svelte kit is the SaaS Laravel backend (multi-tenancy, auth, users, roles, domains, localization) with a Svelte 5 + TypeScript frontend in resources/js.

The Laravel side is identical in all three kits. Only the frontend differs, so this section covers resources/js only. For the backend, start at Core architecture.

Tech stack

Area	Package	Version	Used for
Framework	svelte	^5.16	Runes-based components ($props, $state, $derived, $effect)
Inertia	@inertiajs/svelte	^3.0	Client: Form, Link, page, router, useForm, useHttp, setLayoutProps
Inertia	@inertiajs/vite	^3.0	Resolves pages from resources/js/pages
Build	@sveltejs/vite-plugin-svelte	^7.0	Svelte compilation in Vite
Build	vite / tailwindcss	^8 / ^4.1	Bundling and styling
UI	bits-ui	^2.15	Primitives behind the shadcn-svelte components in components/ui
Icons	lucide-svelte	^0.468	Component icons
Icons	@iconify/svelte	^5.2	String icons rendered by CommonIcon (menus use lucide:* names)
Feedback	svelte-sonner	^0.3	Toast notifications
Drag and drop	sortablejs	^1.15	Reordering on Setup → Menus
Translations	@erag/lang-sync-inertia	^3.1	svelteLang() helper
Auth	@laravel/passkeys	^0.2	Passkey registration and login
Routes	@laravel/vite-plugin-wayfinder	^0.1	Typed route and controller functions
Tooling	svelte-check	^4.1	Type checking

Conventions

What is specific to the Svelte kit compared with Vue and React:

Topic	Svelte kit convention
File naming	PascalCase .svelte files (pages/tenants/Index.svelte). The Inertia page name matches: tenants/Index.
Shared logic	TypeScript modules in resources/js/lib. Modules that use runes end in .svelte.ts (lib/theme.svelte.ts).
Per-page layout	export const layout = … inside a <script module> block
Forms	Inertia <Form> with a {#snippet children({ errors, processing })} block. Common inputs also support bind:value.
Page title	AppHead component (<svelte:head>), not Inertia's Head
Shared props	Reactive page object from @inertiajs/svelte (page.props.auth.user)
Translations	svelteLang() from @erag/lang-sync-inertia/svelte

Get the code

After purchase, your GitHub account gets access to the private repository erag-labs/saas-laravel-starter-kit-svelte automatically (see Repository access).

git clone https://github.com/erag-labs/saas-laravel-starter-kit-svelte.git
cd saas-laravel-starter-kit-svelte

Install

composer setup
php artisan db:seed

• composer setup installs dependencies, creates .env, generates the key, runs migrations and builds the frontend. It does not seed.
• php artisan db:seed creates the roles, permissions, menus and one default user per role. Run it once.
• .env.example ships with APP_URL=https://svelte.test and APP_DOMAIN=svelte.test. Change both to the domain you serve the app on.

For PHP, the database, Herd domains and tenancy, follow Local development.

Step-by-step install (instead of composer setup)

composer install
cp .env.example .env
php artisan key:generate
php artisan migrate --seed
npm install
npm run build

TIP

The Wayfinder files in resources/js/routes and resources/js/actions are generated by the Vite plugin and ignored by git. Keep npm run dev running, or run npm run build, so they exist.

Next steps

• Architecture: folders, app entry, shared props, translations
• Components: the Common* form kit and app shell
• Pages: every page and its route
• Layouts: sidebar/header app layout, card/simple/split auth layout
• Inertia: forms, visits, flash toasts, layout props
• Development: daily commands and adding a page end to end