create-reactivite

A modern frontend boilerplate generator. On run it asks which template you want, then scaffolds a production-ready app with TypeScript, Tailwind CSS v4 and shadcn/ui pre-wired.

🚀 Templates

When you run the CLI you pick one of two templates:

| Template | Stack | | --- | --- | | React + Vite | React 19, Vite 8 (Rolldown), Tailwind v4, shadcn/ui, React Router v7, Recharts | | Next.js 16 | Next.js 16 (App Router), React 19, Tailwind v4, shadcn/ui, i18n, TanStack Query, axios + orval, Zustand, react-hook-form + zod, husky, Vitest + MSW | | Rspack | React 19 + TypeScript, Rspack bundler (SWC). Minimal starter — grow it yourself. |

$ npx create-reactivite my-app

? Project name: my-app
? Pick a template: ›
❯ React + Vite (Tailwind v4, shadcn/ui, React Router)
  Next.js 16 (App Router, i18n, TanStack Query, orval, Zustand, husky)
  Rspack (minimal React + TypeScript starter)

📦 Installation

Using npx (Recommended)

npx create-reactivite my-app
cd my-app
pnpm dev

Using npm

npm create reactivite my-app
cd my-app
npm run dev

Install in current directory

npx create-reactivite .

Dependencies install automatically (pnpm, falling back to npm).

⚛️ Template 1 — React + Vite

Features

• ⚡ Vite 8 — Lightning-fast build tool and dev server (Rolldown bundler)
• ⚛️ React 19 — Latest React with modern features
• 📘 TypeScript 6 — Full TypeScript with strict configuration
• 🎨 Tailwind CSS v4 — Config-less, CSS-variable driven theme
• 🧩 shadcn/ui — Beautiful, accessible UI components (new-york)
• 🧭 React Router v7 — Client-side routing with createBrowserRouter
• 📊 Recharts — Composable charts for the admin dashboard
• 🌙 Dark Mode — Built-in theme switching
• 🔔 Toasts — Sonner notifications
• 🎯 ESLint — Modern flat config

Scripts

• pnpm dev — dev server (port 5173)
• pnpm build — tsc -b && vite build
• pnpm preview — serve the production build
• pnpm lint — ESLint

Structure

my-app/
├── public/
├── src/
│   ├── components/
│   │   ├── ui/                    # shadcn/ui components
│   │   ├── home-page-components/
│   │   └── admin-page-components/
│   ├── lib/utils.ts
│   ├── pages/
│   │   ├── Homepage/
│   │   └── Dashboard/
│   ├── App.tsx                   # createBrowserRouter route shell
│   ├── main.tsx
│   └── global.css
├── components.json
├── vite.config.ts
└── eslint.config.js

Routing

Routes live in App.tsx via createBrowserRouter from react-router v7 (not react-router-dom):

import { createBrowserRouter } from "react-router"

const router = createBrowserRouter([
  { path: "/", element: <Homepage /> },
  { path: "/dashboard", element: <Dashboard /> },
])

▲ Template 2 — Next.js 16

A locale-scoped App Router boilerplate with a full data layer and tooling.

Features

• ▲ Next.js 16 — App Router, output: "standalone"
• 🌍 i18n — app/[locale] routing, lightweight TranslationProvider + locales/*.json
• 🔁 TanStack Query — QueryClientProvider + Devtools
• 🔌 axios + orval — typed API hooks generated from your OpenAPI schema
• 🐻 Zustand — state stores (persisted user-store)
• 📝 react-hook-form + zod — typed forms
• 🧪 Vitest + MSW — unit tests with mocked network
• 🐶 husky — pre-commit: lint + format + tests
• 🎨 Tailwind v4 + shadcn/ui

Scripts

• pnpm dev — dev server (port 3000, redirects / → /az)
• pnpm build — next build
• pnpm test / pnpm test:run — Vitest
• pnpm generate:api — orval codegen into services/generated/
• pnpm lint / pnpm format

Structure

my-app/
├── app/
│   ├── layout.tsx              # root passthrough
│   ├── page.tsx                # redirects to /{DEFAULT_LOCALE}
│   ├── globals.css
│   ├── api/clear-session/
│   └── [locale]/
│       ├── layout.tsx          # html/body shell + providers
│       ├── locales.ts          # server-only dictionary loader
│       ├── page.tsx            # Home
│       ├── (public)/login/
│       └── (private)/dashboard/
├── components/ui/              # shadcn/ui
├── config/                     # env + constants (LOCALES)
├── contexts/                   # translation-context
├── hoc/                        # QueryProvider
├── lib/                        # utils, paramsSerializer
├── services/
│   ├── httpClient/             # axios + orval mutator
│   └── generated/              # orval output
├── store/                      # zustand
├── locales/                    # az.json, en.json
├── testing/msw/
└── orval.config.ts

API codegen (orval)

1. Point orval.config.ts input.target at your OpenAPI schema (or set OPENAPI_TARGET).
2. pnpm generate:api → writes react-query hooks + models to services/generated/.

The @/ path alias maps to the project root in this template (not src/).

🦀 Template 3 — Rspack (minimal)

A deliberately bare React + TypeScript starter on Rspack (Rust-based bundler, built-in SWC). No router, no UI kit — a clean base to build on.

Scripts

• pnpm dev — dev server (port 5174)
• pnpm build — production build → dist/
• pnpm preview — serve the production build

Structure

my-app/
├── index.html
├── rspack.config.mjs       # entry, swc loader, html plugin, native CSS
├── tsconfig.json
└── src/
    ├── main.tsx
    ├── App.tsx
    ├── index.css
    └── components/author-credit.tsx

👤 Author

Every template renders a small credit linking to the author. Built by Javid Salimov — GitHub · LinkedIn · npm.

🎨 Adding shadcn/ui Components

The React + Vite and Next.js templates use shadcn/ui (new-york, lucide icons):

npx shadcn@latest add button
npx shadcn@latest add form

🤝 Contributing

Contributions welcome — open a PR.

📄 License

MIT

🔗 Links

• React · Next.js · Vite · Rspack
• Tailwind CSS · shadcn/ui
• React Router · TanStack Query · orval
• Zustand · Recharts · TypeScript

Happy coding! 🎉