# React Router Installation
This guide covers React Router framework mode. A normal Vite SPA that uses React Router as a
library follows the [Vite React guide](/docs/frameworks/vite-react/).
## Requirements
- React and React DOM 18 or newer.
- `react-router.config.*` and `vite.config.*`.
- `app/root.*` and an existing `app/app.css`, `app/root.css`, or `app/styles.css` file.
- The existing `@tailwindcss/vite` plugin in the Vite configuration.
## Create a React Router Project
Skip this step when the framework-mode project already exists.
```bash
npx create-react-router@latest my-app
```
## Initialize Starwind
```bash
cd my-app
npx starwind@latest init --defaults
```
Starwind uses `react-router.config.*` to distinguish framework mode from a Vite SPA. It validates
the Vite config, root route, and global stylesheet before it changes the project.
| Purpose | Path |
| --- | --- |
| Styled components | `app/components/starwind` |
| Shared utilities | `app/lib/utils` |
| Starwind stylesheet | `app/styles/starwind.css` |
| Theme initialization owner | `app/root.*` |
The `@/*` alias points at the `app/` source root, so `@/components/starwind/button` resolves to
`app/components/starwind/button`.
## Add and Render Button
```bash
npx starwind@latest add button
```
```tsx title="app/routes/home.tsx"
import { Button } from "@/components/starwind/button";
export default function Home() {
return ;
}
```
## Framework Wiring
Complete the [shared manual setup](/docs/getting-started/manual-setup/) with the React adapter. Set
`@/*` to `./app/*`. The existing Vite configuration must include React Router and Tailwind.
```ts title="vite.config.ts"
import tailwindcss from "@tailwindcss/vite";
import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [tailwindcss(), reactRouter()],
resolve: {
tsconfigPaths: true,
},
});
```
Import the Starwind stylesheet through the existing app stylesheet.
```css title="app/app.css"
@import "./styles/starwind.css";
/* Existing application styles remain here. */
```
Render `ThemeInitScript` in the root document head.
```tsx title="app/root.tsx"
import { ThemeInitScript } from "@starwind-ui/react/theme";
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
export function Layout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
export default function App() {
return ;
}
```
Initialization preserves an existing Starwind theme initializer and the existing CSS import order.
## Support Boundaries
Automatic setup expects React Router framework mode with Vite and the Tailwind Vite plugin already
configured. Declarative and data-mode Vite SPAs use the
[Vite React guide](/docs/frameworks/vite-react/). Starwind rejects an incomplete framework host
during preflight, before package installation or project mutation.
See [Dark Mode](/docs/getting-started/dark-mode/#react-router) for theme controls.