Installation

Starwind configures an existing Astro, React, or Vue framework project. Create the application with its official starter first, then run Starwind from the project root.

Quick Start

init --defaults examines the project before it selects the Astro, React, or Vue adapter, file locations, and framework integration.

pnpx starwind@latest init --defaults

npx starwind@latest init --defaults

yarn dlx starwind@latest init --defaults

Choose Your Framework

The CLI detects supported hosts. Choose a guide for the framework your components use.

Astro

React

Vue (Beta)

Vue 3.5 support is in public beta. APIs can change during the 0.x release series. It includes Primitive adapters and editable Styled components. Styled Image is Astro-only. Select the Vue tab on component examples; the API tables currently cover Astro and React. Use the installed Vue prop types for model and event signatures. Report beta issues through the issue tracker.

What Starwind Adds

• The framework adapter is @starwind-ui/astro, @starwind-ui/react, or @starwind-ui/vue@beta. React hosts use react in starwind.config.json; Vue hosts use vue. Astro can also host secondary React and Vue targets.
• starwind.config.json records the registry, adapter, stylesheet, component directory, utility directory, and installed component versions.
• Styled components are copied into your application. You own their source and can edit it.
• The common Starwind stylesheet provides Tailwind CSS v4, design tokens, dark mode, animation utilities, and shared component styles.

Manual Setup

The Manual Setup guide covers the shared packages, starwind.config.json, source paths, and complete base stylesheet. Finish with your framework guide to connect aliases, CSS entry files, Tailwind, and theme initialization.

Add a Component

After initialization, install Button from the styled registry.

pnpx starwind@latest add button

npx starwind@latest add button

yarn dlx starwind@latest add button

Render the Component

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

Go Deeper

• CLI documents detection, commands, and options.
• Theming explains the common stylesheet and design tokens.
• Dark Mode explains theme initialization and controls.
• Primitives covers adapter packages and vendored Primitive source.
• Runtime And Raw HTML covers the framework-independent Runtime APIs.