# 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](/docs/frameworks/astro/).

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

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

## Add a Svelte Component

Create this file:

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

```astro title="src/pages/index.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](/docs/components/) 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](/docs/frameworks/astro/#stylesheet-and-theme-initialization) to your layout.

## Manual Setup

For setup by hand, complete [Astro manual setup](/docs/frameworks/astro/#manual-setup), then install
the Svelte package from [Manual Setup](/docs/getting-started/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](/docs/frameworks/astro/#stylesheet-and-theme-initialization) 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](https://docs.astro.build/en/guides/integrations-guide/svelte/).

Read [Svelte usage](/docs/getting-started/svelte/) for bindings and callbacks.
Direct package installs use `@starwind-ui/svelte@beta`. Svelte Pro setup is unavailable.

[Report an issue](https://github.com/starwind-ui/starwind-ui/issues) if you run into a problem.