# Astro + React Installation

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](/docs/frameworks/astro/).

## Install with the CLI

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

```bash
npx starwind@latest init --framework react --defaults
npx starwind@latest add button --framework react
```

## Use the Component

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

```astro title="src/pages/index.astro"
<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](/docs/components/) 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](/docs/frameworks/astro/#stylesheet-and-theme-initialization) to your layout.

## Manual Setup

For setup by hand, complete [Astro manual setup](/docs/frameworks/astro/#manual-setup), then install
the React package from [Manual Setup](/docs/getting-started/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](/docs/frameworks/astro/#stylesheet-and-theme-initialization) 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.