Laravel now has an official Svelte starter kit, joining the existing React, Vue, and Livewire options. The kit pairs Svelte 5 with Inertia, giving you a single-page application experience while keeping Laravel's server-side routing and controllers in place.
Stack
The kit includes:
- Svelte 5 with TypeScript
- Inertia 2 for client-side navigation without an API
- Tailwind CSS for styling
- shadcn-svelte and bits-ui for UI components
- Vite for asset bundling
Authentication
Authentication is handled by Laravel Fortify and includes login, registration, password reset, email verification, and two-factor authentication out of the box. You can enable or disable individual features in config/fortify.php.
Layouts
The kit ships with two application layouts: a sidebar layout (the default) and a header layout. The sidebar supports three variants — sidebar, inset, and floating — configured in resources/js/components/AppSidebar.svelte. Authentication pages offer three layout variants as well: simple, split, and card.
Components
UI components come from shadcn-svelte. Publish additional components with:
npx shadcn-svelte@latest add switch
Components are published to resources/js/components/ui/ and can be imported directly in your Svelte files.
Server-Side Rendering
SSR support is included. Build an SSR-compatible bundle:
npm run build:ssr
Or start the development server with SSR enabled:
composer dev:ssr
Getting Started
Create a new application with the Laravel installer and select Svelte when prompted:
laravel new my-app
Then install dependencies and start the development servers:
cd my-app npm install && npm run build composer run dev
Your application will be available at http://localhost:8000.
The starter kit source is available at github.com/laravel/svelte-starter-kit. Documentation is in the Laravel starter kits docs.
