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. Choose the minimal SvelteKit app with TypeScript. Skip this step for an existing app.

pnpm dlx sv create my-app
cd my-app
pnpm install

npx sv create my-app
cd my-app
npm install

yarn dlx sv create my-app
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

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.

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

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 "$lib/starwind/button";
</script>

<Button>Hello from SvelteKit</Button>

SvelteKit provides $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 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. 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.