Vite

Vite is the other good fit: fast, TypeScript-first, and nothing about Forme depends on a specific bundler.

Setup#

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install tailwindcss @tailwindcss/postcss
npx shadcn@latest init
npx shadcn@latest add @forme/button

Tailwind#

Install the PostCSS plugin, then import the tokens in src/index.css, after Tailwind:

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/postcss";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

/* src/index.css */
@import "tailwindcss";
@import "./components/forme/foundation.css";

Forme needs no @source directives here, because the components you installed are files in your own project and Tailwind already scans it.

Aliases#

components.json is what shadcn and the Forme CLI use to resolve targets. Vite needs the same alias configured for the imports to resolve at build time:

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Both matter. The alias in tsconfig.json is for TypeScript, the alias in vite.config.ts is for the bundler, and a mismatch between them is the classic cause of an import that typechecks and then fails to build.