Vite Svelte Installation

Use Svelte 5.29 or newer within Svelte 5.

Use Node.js 22.12 or newer, or a newer version if your starter requires it. Starwind uses Tailwind CSS 4. Starwind Pro does not yet support Svelte.

Create a Vite Svelte Project

Use the official Vite Svelte starter. Skip this step for an existing app.

pnpm create vite@latest my-app --template svelte-ts
cd my-app
pnpm install

npm create vite@latest my-app -- --template svelte-ts
cd my-app
npm install

yarn create vite my-app --template svelte-ts
cd my-app
yarn install

Set the Svelte Version

Install a supported Svelte version before running Starwind:

pnpm add -D "svelte@>=5.29.0 <6"

npm install -D "svelte@>=5.29.0 <6"

yarn add -D "svelte@>=5.29.0 <6"

Install with the CLI

Keep the starter’s src/App.svelte and src/main.ts or src/main.js. Your Vite config should use defineConfig({ ... }), with the Svelte plugin listed directly in plugins.

pnpx starwind@latest init --framework svelte --defaults

npx starwind@latest init --framework svelte --defaults

yarn dlx starwind@latest init --framework svelte --defaults

The CLI installs the Svelte package, adds the Tailwind Vite plugin, and imports src/styles/starwind.css from src/main.*. It sets framework: "svelte" in starwind.config.json. Styled files go into src/components/starwind; utilities go into src/lib/utils.

Add and Render Button

pnpx starwind@latest add button --framework svelte

npx starwind@latest add button --framework svelte

yarn dlx starwind@latest add button --framework svelte

<script lang="ts">
  import { Button } from "./components/starwind/button";
</script>

<Button>Hello from Svelte</Button>

Optional: Use the Docs Import Alias

Docs examples use @/components/starwind in imports. To use those paths, add the @ shortcut to Vite as shown below. This step is optional; relative imports also work. Keep your existing plugins.

import { fileURLToPath } from "node:url";
import tailwindcss from "@tailwindcss/vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [svelte(), tailwindcss()],
  resolve: {
    alias: { "@": fileURLToPath(new URL("./src", import.meta.url)) },
  },
});

Add "@/*": ["./src/*"] to compilerOptions.paths in tsconfig.app.json. Keep the starter’s other compiler options. Relative imports also work.

Review starter CSS in src/app.css if it changes page width, button styles, or inherited text. Starwind’s theme styles are in src/styles/starwind.css.

Manual Setup

To set up Starwind by hand, follow Manual Setup and select Svelte for the packages and starwind.config.json. The Svelte package is @starwind-ui/svelte@beta. Use the paths listed above.

Keep the Svelte plugin in vite.config.ts and add the Tailwind plugin shown in the alias example above. Import ./styles/starwind.css from src/main.ts or src/main.js. The CLI handles the Tailwind plugin and stylesheet import when you use init.

Optional: Set Up Dark Mode

To remember a visitor’s theme choice or follow their system setting, use the Svelte dark mode guide. Add the theme script yourself after installation.

Use Svelte Components

See Svelte usage for more examples. On component pages, choose the Svelte tab for installation commands and code you can copy.