Astro + Svelte Installation

Use Starwind Svelte components in your Astro pages. Run the commands below from your project folder. Need a project first? Follow the Astro setup guide.

Install with the CLI

If Svelte is already configured, skip the first two commands. Use Svelte >=5.29.0 <6 and a page layout at src/layouts/Layout.astro or src/layouts/BaseLayout.astro.

pnpm astro add svelte
pnpm add -D "svelte@>=5.29.0 <6"
pnpx starwind@latest init --framework svelte --defaults
pnpx starwind@latest add button --framework svelte

npx astro add svelte
npm install -D "svelte@>=5.29.0 <6"
npx starwind@latest init --framework svelte --defaults
npx starwind@latest add button --framework svelte

yarn astro add svelte
yarn add -D "svelte@>=5.29.0 <6"
yarn dlx starwind@latest init --framework svelte --defaults
yarn dlx starwind@latest add button --framework svelte

Add a Svelte Component

Create this file:

<script lang="ts">
  import { Button } from "./starwind-svelte/button";
  let count = $state(0);
</script>

<Button onclick={() => count += 1}>Clicked {count} times</Button>

Render the Island

Add it to an Astro page, using your existing page layout:

---
import HelloSvelte from "../components/HelloSvelte.svelte";
import Layout from "../layouts/Layout.astro";
---

<Layout>
  <HelloSvelte client:load />
</Layout>

client:load makes the component interactive in the browser.

Adding More Components

Choose the Svelte tab on a component page and copy its installation command. Keep --framework svelte on the command so the CLI installs the Svelte version.

What the CLI Does

The astro add svelte command sets up Svelte in Astro. Starwind then installs its packages, sets the folder for your Svelte components, and imports the shared stylesheet. Add the component to a page with client:load, as shown above. For saved themes, add the Astro theme script to your layout.

Manual Setup

For setup by hand, complete Astro manual setup, then install the Svelte package from Manual Setup. Configure the Astro Svelte integration and use the component directory below. Keep framework: "astro" in starwind.config.json and set componentDirs.svelte to src/components/starwind-svelte.

Configuration Details

Components are installed in src/components/starwind-svelte. Astro and Svelte share src/styles/starwind.css; your layout should import it once. See the Astro layout example for styles and theme setup.

Keep related parts, such as a Dialog’s trigger and content, together in a .svelte component. Import that component into your Astro page and add client:load to make it interactive.

In your Astro config, list svelte() directly in the integrations array inside defineConfig({ ... }). See Astro’s Svelte integration guide.

Read Svelte usage for bindings and callbacks. Direct package installs use @starwind-ui/svelte@beta. Svelte Pro setup is unavailable.

Report an issue if you run into a problem.