# 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](https://vite.dev/guide/). Skip this step for an existing app.

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

## Set the Svelte Version

Install a supported Svelte version before running Starwind:

```bash
npm install -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`.

```bash
npx 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

```bash
npx starwind@latest add button --framework svelte
```

```svelte title="src/App.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.

```ts title="vite.config.ts"
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](/docs/getting-started/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](/docs/getting-started/dark-mode/#svelte). Add the theme script yourself after installation.

## Use Svelte Components

See [Svelte usage](/docs/getting-started/svelte/) for more examples. On component pages, choose
the Svelte tab for installation commands and code you can copy.