Installation

Starwind configures an existing Astro or React 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 or React adapter, file locations, and framework integration.

Starwind v3 is stable and published on npm’s latest tag. The commands below install the Runtime-backed Astro and React setup documented on this site.

pnpx starwind@latest init --defaults

npx starwind@latest init --defaults

yarn dlx starwind@latest init --defaults

Choose Your Framework

The starwind init command will auto-detect and configure supported frameworks. Full guides can be found below.

What Starwind Adds

• The framework adapter is @starwind-ui/astro or @starwind-ui/react. React hosts share the public react adapter value in starwind.config.json.
• 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 framework guides explain the supported project shape and the manual integration points for aliases, CSS entry files, Tailwind, and theme initialization. They reference the shared stylesheet instead of repeating it. Start with Theming when you need the full token and stylesheet model.

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

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.