# Vite

Use the kit in a TypeScript React 19 application.

## Prepare the application

For a new application, create the React + TypeScript template and enter its directory. Skip creation if you already have a project.

```bash
pnpm create vite@9.2.1 my-app --template react-ts --no-interactive
cd my-app
pnpm install
```

With npm, use `npm create vite@9.2.1 my-app -- --template react-ts --no-interactive`, then `cd my-app` and `npm install`. Use a Node.js version supported by your installed Vite version.

Install Tailwind’s Vite integration (npm: `npm install -D tailwindcss @tailwindcss/vite @types/node`):

```bash
pnpm add -D tailwindcss @tailwindcss/vite @types/node
```

```ts title="vite.config.ts"
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: { alias: { "@": fileURLToPath(new URL("./src", import.meta.url)) } },
});
```

Merge matching TypeScript paths into both `tsconfig.json` and `tsconfig.app.json`, preserving their existing compiler options, references, and includes:

```json
{ "compilerOptions": { "paths": { "@/*": ["./src/*"] } } }
```

## Create components.json

Write this file to the application directory instead of running `shadcn init`, which would write a shadcn theme over the kit’s styles. If the application already has a `components.json`, keep it and add the `@siteplane` entry to its `registries`.

```json title="components.json"
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/index.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks",
    "utils": "@/siteplane/system/utils/cn"
  },
  "registries": {
    "@siteplane": "https://ui.siteplane.io/registry/{name}.json"
  }
}
```

## Install the source

```bash
pnpm dlx shadcn@4.18.0 add @siteplane/button
pnpm add @fontsource-variable/inter
```

Replace the contents of `src/index.css` with the kit import below and delete the starter’s `src/App.css`. The starter styles set their own colors, fonts and a centered `#root`, which would override the kit’s. An application with its own styles keeps them below the import, as [Installation](/docs/installation/#load-styles-and-typography) describes.

```css title="src/index.css"
@import "./siteplane/system/styles/base.css";
@source ".";
```

Set the theme on the root element of `index.html`. This is the template’s file with `data-theme="light"` added; use `dark` for the dark theme. The kit stays light until an application sets `data-theme="dark"` or the `dark` class, and it does not follow the operating system by itself.

```html title="index.html"
<!doctype html>
<html lang="en" data-theme="light">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>my-app</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
```

`src/main.tsx` loads Inter, the kit’s typeface, and the global CSS. To set the kit in another typeface, follow [Typeface](/docs/customization/theming/#typeface).

```tsx title="src/main.tsx"
import { createRoot } from "react-dom/client";
import "@fontsource-variable/inter";
import "./index.css";
import App from "./App";

createRoot(document.getElementById("root")!).render(<App />);
```

```tsx title="src/App.tsx"
import { Button } from "@/siteplane/components/button";

export default function App() {
  return (
    <main className="p-8">
      <Button>Continue</Button>
    </main>
  );
}
```

## Use a complete example

Copy the TSX from a component preview into `src/components/example.tsx`, import its default export in App, and install the component modules it imports. The `"use client"` directive in copied examples is harmless in Vite.

Run your project’s build and check the result in the browser. The [application examples](/docs/examples/) run on the same installed source outside the documentation site.

Start the development server with `pnpm dev` (npm: `npm run dev`). See [application-wide dark mode](/docs/customization/theming/#application-wide-dark-mode) to connect a global theme switch.