Welcome to Starwind UI

Starwind UI gives you accessible components for Astro, React, Vue, and Svelte. Add components to your project, then edit their code and styles to suit your app.

Choose your framework to install Starwind and add your first component.

Start With A Styled Component

Install the project defaults, add Button, and render it in your app.

---
import { Button } from "@/components/starwind/button";
---

<Button>Hello World</Button>

import { Button } from "@/components/starwind/button";

export function Example() {
  return <Button>Hello World</Button>;
}

<script setup lang="ts">
import { Button } from "@/components/starwind/button";
</script>

<template>
  <Button>Hello World</Button>
</template>

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

<Button>Hello World</Button>

The installed files include the component’s styles. You can change them directly in your project. SvelteKit projects use $lib/starwind/button for the import above.

When You Need More Control

• Primitives provide accessible interactions without default styles. Packages are available for Astro, React, Vue, and Svelte.
• Theming explains how to change colors and other shared styles.
• Runtime and raw HTML covers adding Starwind interactions to your own HTML.
• Manual setup explains the files and settings that the CLI creates.

Framework Support

Svelte requires version 5.29 or newer within Svelte 5. See the installation guides for supported project types.