Vite

Prepare the application

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

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):

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

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:

{ "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.

{
  "$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

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 describes.

@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.

<!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.

import { createRoot } from "react-dom/client";
import "@fontsource-variable/inter";
import "./index.css";
import App from "./App";

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

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 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 to connect a global theme switch.