Laravel Adds an Official Svelte + Inertia Starter Kit

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.