create-rv

A zero-config CLI that scaffolds a Vite + React 19 + Tailwind v4 app with the rollout stack pre-wired: router, state, data, forms, validation, shadcn/ui, lint, and format. Choose TypeScript or JavaScript and one of three routers interactively, or skip the prompts with flags.

what you get

• Vite + React 19 + TypeScript (or JavaScript) with @/* path alias
• Tailwind v4 wired via @tailwindcss/vite — no tailwind.config.js, no postcss.config.js, just @import "tailwindcss" in src/index.css
• Router — pick one:
  • tanstack — TanStack Router (file-based, type-safe, vite plugin, generates routeTree.gen.ts)
  • react-router — React Router v8 (declarative: BrowserRouter + Link/Route/Routes imported from react-router)
  • none — single-page shell
• shadcn/ui (primed) — components.json, cn() util, Button/Card/Input components, oklch theme tokens, tsx flag in components.json flips with language
• TanStack Query — QueryClientProvider wired for the chosen router
• Zustand — sample store at src/lib/store.ts
• React Hook Form + Zod — example form at src/components/ExampleForm.tsx
• ESLint — flat config, Vercel/TS style + import sort + tailwind
• Prettier — with prettier-plugin-tailwindcss
• 4 package managers — npm, pnpm, yarn, bun
• Optional git init and dependency install

usage

interactive

npx create-rv my-app

You'll be prompted for project name, package manager, language, router, and extras. Press Enter at the router prompt to accept the default (React Router v8).

non-interactive (CI / scripts)

npx create-rv my-app \
  --pkg pnpm \
  --lang ts \
  --router react-router \
  --with query,zustand,rhf,zod,eslint,prettier,shadcn \
  --install \
  --yes

--yes accepts all defaults and skips prompts.

flags

| flag | values | default | | --- | --- | --- | | --pkg | npm | pnpm | yarn | bun | npm | | --lang | ts | js | ts | | --router | tanstack | react-router | none | react-router | | --with | comma-separated extras | all extras | | --no-git | skip git init | git inits by default | | --install | run install after scaffold | off | | -y, --yes | accept all defaults, no prompts | off |

Available extras: query, zustand, rhf, zod, eslint, prettier, shadcn.

after scaffold

cd my-app
pnpm dev

Add more shadcn components:

pnpm dlx shadcn@latest add dialog

Lint and format (if included):

pnpm lint
pnpm format

how it works

1. Parse CLI args via commander.
2. Prompt for any missing values via @clack/prompts (skipped if every choice was provided as a flag or --yes is set).
3. Copy templates/base/<lang>/ (Vite + React skeleton) into the destination, then dotfiles from templates/base/.
4. Overlay the chosen router from templates/extras/router-*/ and install its package via src/installers/router-*.ts.
5. Install each selected extra by copying its template overlay and adding deps + scripts to package.json.
6. Rewrite to JS if --lang js: rename .ts→.js, .tsx→.jsx, drop .d.ts and typescript deps, strip tsc from build.
7. Optionally git init and run install.
8. Render the generated project's README.md from a __STACK_LIST__ / __SCRIPTS_EXTRA__ template.

Templates live in templates/base/{ts,js}/ and templates/extras/*/. Each extra has an installer in src/installers/ that copies its overlay and mutates package.json.

router notes

• TanStack Router is file-based. Routes live in src/routes/; the vite plugin generates routeTree.gen.ts on dev/build. <RouterProvider> wraps the app in main.tsx.
• React Router v8 uses the declarative API: BrowserRouter wraps <App /> in main.tsx, and App.tsx uses <Routes> / <Route> / <Link>. Everything is imported from react-router (in v8 the declarative API is in the root package; react-router-dom is removed).

project layout

src/
  cli.ts              # commander setup + flag parsing
  prompts.ts          # clack interactive prompts
  scaffold.ts         # main scaffold orchestration
  options.ts          # types + valid value lists
  copyDotfiles.ts     # walker that copies dotfiles (cpSync skips them on node 25)
  installers/         # one file per extra; mutates pkg + copies overlay
templates/
  base/{ts,js}/       # Vite+React skeleton
  extras/<name>/      # overlay files copied into the project
scripts/
  smoke.mjs           # scaffolds 4 variants into /tmp and asserts files

dev

pnpm install
pnpm build                  # tsc -> dist/
node dist/index.js /tmp/demo --pkg npm --with shadcn --no-git --yes
node scripts/smoke.mjs      # scaffolds 4 variants, asserts files

Smoke covers 4 variants: ts × tanstack, js × tanstack, ts × react-router + shadcn, js × react-router + shadcn, plus a regression check that react-router main.tsx wraps <App /> in <BrowserRouter> imported from react-router.