Add a UI framework integration

Install an official integration when one part of the page genuinely benefits from a framework’s state and component model. For React:

npx astro add react

The command installs the packages and updates astro.config.mjs. You can then import a React component from an Astro file:

---
import Counter from "../components/Counter.jsx"
---

<Counter />

This renders the component to HTML, but it does not make the counter interactive. Hydration is a separate decision expressed with a client:* directive.

The integration also does not convert the whole site to React. Astro pages, Markdown content, Vue islands, and React islands can coexist. That flexibility is useful for gradual migration, but mixing frameworks increases dependencies and the amount visitors may download.

Use one framework by default and add another only for a concrete constraint, such as reusing a valuable existing component. After installation, inspect astro.config.mjs and the browser network requests so you know what changed—and what did not.