On this page

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.

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.

pnpm dlx create-react-router@latest my-app

npx create-react-router@latest my-app

yarn dlx create-react-router@latest my-app

Initialize Starwind

cd my-app
pnpx starwind@latest init --defaults

cd my-app
npx starwind@latest init --defaults

cd my-app
yarn dlx 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

pnpx starwind@latest add button

npx starwind@latest add button

yarn dlx starwind@latest add button

import { Button } from "@/components/starwind/button";

export default function Home() {
  return <Button>Hello from React Router</Button>;
}

Framework Wiring

Complete the shared manual setup with the React adapter. Set @/* to ./app/*. The existing Vite configuration must include React Router and Tailwind.

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.

@import "./styles/starwind.css";

/* Existing application styles remain here. */

Render ThemeInitScript in the root document head.

import { ThemeInitScript } from "@starwind-ui/react/theme";
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <ThemeInitScript />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function App() {
  return <Outlet />;
}

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. Starwind rejects an incomplete framework host during preflight, before package installation or project mutation.

See Dark Mode for theme controls.