Skip to main content

Starwind UI v3.0 is now available! Migration guide

On this page

Astro + React Installation

View Markdown

Use Starwind React components in your Astro pages. Run the commands below from your project folder. Need a project first? Follow the Astro setup guide.

Install with the CLI

This installs the React integration and adds a Button to your project.

Use the Component

Add the Button to an Astro page. Use your existing page layout in place of Layout if needed.

src/pages/index.astro
---
import Layout from "@/layouts/Layout.astro";
import { Button } from "@/components/starwind-react/button";
---


<Layout>
  <Button client:load>Hello from a React island</Button>
</Layout>

client:load makes the component interactive in the browser.

Adding More Components

Choose the React tab on a component page and copy its installation command. Keep --framework react on the command so the CLI installs the React version.

What the CLI Does

The CLI adds the Astro React integration and installs the required Starwind packages. It records where to put React components and connects the shared stylesheet. Add the component to a page with client:load, as shown above. For saved themes, add the Astro theme script to your layout.

Manual Setup

For setup by hand, complete Astro manual setup, then install the React package from Manual Setup. Configure the Astro React integration and use the component directory below. Keep framework: "astro" in starwind.config.json and set componentDirs.react to src/components/starwind-react.

Configuration Details

Components are installed in src/components/starwind-react. Astro and React share src/styles/starwind.css; your layout should import it once. See the Astro layout example for styles and theme setup.

Keep related parts, such as a Dialog’s trigger and content, together in a .tsx component. Import that component into your Astro page and add client:load to make it interactive.