# SvelteKit 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 SvelteKit Project

Use the [official Svelte CLI](https://svelte.dev/docs/kit/creating-a-project). Choose the minimal
SvelteKit app with TypeScript. Skip this step for an existing app.

```bash
npx sv create my-app
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

Use SvelteKit 2 with the usual `src/routes` folder and `src/app.html`. Keep the starter’s Svelte
config and a Vite config written as `defineConfig({ ... })`, with `sveltekit()` in `plugins`.

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

The CLI installs the Svelte package and adds the Tailwind Vite plugin. It imports
`src/styles/starwind.css` from `src/routes/+layout.svelte`, creating that layout when needed.
It keeps your existing layout content and sets `framework: "svelte"` in `starwind.config.json`.

| Purpose             | Path                      |
| ------------------- | ------------------------- |
| Styled components   | `src/lib/starwind`        |
| Shared utilities    | `src/lib/utils`           |
| Starwind stylesheet | `src/styles/starwind.css` |

## Add and Render Button

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

```svelte title="src/routes/+page.svelte"
<script lang="ts">
  import { Button } from "$lib/starwind/button";
</script>

<Button>Hello from SvelteKit</Button>
```

[SvelteKit provides `$lib`](https://svelte.dev/docs/kit/$lib) for `src/lib`. When copying component
examples, change `@/components/starwind/...` imports to `$lib/starwind/...`.
Keep related parts, such as a Dialog’s trigger and content, together in a `.svelte` component.
When you add your own code that uses `window` or `document`, run it after the component mounts
so it also works with server rendering.

## 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 `sveltekit()` in the Vite plugins array and add `tailwindcss()` from `@tailwindcss/vite`.
Import `../styles/starwind.css` in the `<script>` of `src/routes/+layout.svelte`.
The CLI handles these changes when you use `init`. Keep `$lib` for component imports.

## 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.