Installation

The Starwind CLI detects many common Astro, React, Vue, and Svelte project types and handles installation for you. It installs the required packages and sets up the config, styles, and imports for supported projects.

Start with the CLI commands below. Your framework guide explains any extra steps and includes manual setup details.

Quick Start

Run this command from your existing project folder, then follow any remaining steps printed by the CLI. To create a project first, or use React, Vue, or Svelte inside Astro, open your framework guide.

pnpx starwind@latest init --defaults

npx starwind@latest init --defaults

yarn dlx starwind@latest init --defaults

Add a Component

Install your first component:

pnpx starwind@latest add button

npx starwind@latest add button

yarn dlx starwind@latest add button

Render the Component

Use the Button in your app. Your framework guide shows which file and import path to use.

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

Choose Your Framework

Astro

React

Vue

Vue 3.5 support is in public beta. APIs can change during 0.x releases. Report an issue if you run into a problem.

Svelte

Svelte support is in public beta for Svelte 5.29 or newer within Svelte 5. APIs can change during 0.x releases. Report an issue if you run into a problem.

Next Steps

Browse components to find what you need. Their source files are added to your project, so you can edit them to fit your app.

• Theming for colors and styles.
• Dark Mode for theme switching.
• CLI for commands and options.
• Manual Setup to configure Starwind yourself.