Starwind UI Comes to Svelte 5

Starwind UI now supports Svelte 5! You can add components to a SvelteKit app or use them in a Vite project. If you’re building with Astro, you can use them inside your Svelte components there too.

Starwind started with Astro and a simple idea: the components you use should be easy to make your own. With this release, that same approach comes to Svelte. Add a component through the CLI, open its files in your editor, and change it to fit your app.

Components for the Pages You’re Building

Try this Svelte dialog. Change your email preference and save it to see the page update.

A settings page might start with a few inputs and a save button. As it grows, you might need a searchable list of team members or a confirmation dialog before someone deletes their account.

Starwind includes components for those interactions. Combobox gives you a searchable choice list. Use Dialog when a task needs its own space, with keyboard and focus behavior included. The form components help connect fields to their labels and error messages while building off of normal HTML forms.

The components come with Tailwind styles. Their source files live in your project, so you can adjust the spacing or change the layout as your design takes shape. Shared behavior comes from the Starwind packages installed alongside them, and matches across frameworks for consistent implementation everywhere.

You can browse the component collection and choose the Svelte tab on a component page to see its installation command and examples.

Add Your First Component

Let’s use an existing SvelteKit 2 project. You’ll need Svelte 5.29 or newer within the Svelte 5 release line, plus Node.js 22.12 or newer. Starwind uses Tailwind CSS 4, and the setup command connects its styles to your app automatically.

If you’re starting fresh, follow the SvelteKit setup guide to create a project first. There are also guides for Vite with Svelte and Astro with Svelte.

From your project folder, initialize Starwind:

pnpm dlx starwind@latest init --framework svelte --defaults

The CLI installs the required packages, adds the Tailwind plugin, and imports the Starwind stylesheet into your layout. It also creates the configuration used when you add components.

Now add a button:

pnpm dlx starwind@latest add button --framework svelte

Open src/routes/+page.svelte and use it:

<script lang="ts">
  import { Button } from "$lib/starwind/button";
</script>

<Button>Save changes</Button>

In SvelteKit, Starwind puts your components in src/lib/starwind. SvelteKit’s $lib shortcut points to src/lib, which is why the import starts there. You’ll find the button’s source in src/lib/starwind/button.

The setup guides include npm and Yarn commands too.

Use the Svelte You Know

Starwind components support Svelte bindings for values such as checked state. Add a checkbox to try it:

pnpm dlx starwind@latest add checkbox --framework svelte

This example keeps a preference connected to the page’s state:

<script lang="ts">
  import { Checkbox } from "$lib/starwind/checkbox";

  let emailUpdates = $state(false);
</script>

<Checkbox
  id="blog-binding-email"
  label="Email me product updates"
  bind:checked={emailUpdates}
/>

<p aria-live="polite">{emailUpdates ? "Email updates are on." : "Email updates are off."}</p>

When someone changes the checkbox, emailUpdates changes with it. Inputs support bind:value, and dialogs let you track whether they’re open with bind:open.

The Svelte usage guide covers these patterns with complete form and dialog examples. When copying those examples into SvelteKit, use $lib/starwind for the component imports.

Make It Fit Your App

Start with the options a component provides. For example, give a secondary action an outline:

<Button variant="outline">Cancel</Button>

For changes across the app, edit the theme in src/styles/starwind.css. The theming guide explains how the shared colors work. You can also edit the installed component files when you need a different layout or more specific styling.

To follow a visitor’s system theme or remember their choice, complete the extra steps in the Svelte dark mode guide.

Try the Beta

Try adding a component to a page you’re working on. If something behaves unexpectedly or an example leaves you stuck, open an issue with your setup and a small example we can run. That feedback will help us improve Svelte support as the beta develops.

Get started with SvelteKit →