create-modern-react

Production-ready React + TypeScript + Tailwind in 15 seconds

npx create-modern-react my-app

---

Why?

┌─────────────────────────────────────────────────────────────────────────┐
│                                                                         │
│   npm create vite@latest              vs       npx create-modern-react  │
│                                                                         │
│   ✗ Empty src/ folder                         ✓ Complete project        │
│   ✗ No styling solution                       ✓ Tailwind CSS ready      │
│   ✗ No routing                                ✓ Wouter + lazy loading   │
│   ✗ No API layer                              ✓ Axios + interceptors    │
│   ✗ No UI components                          ✓ Shadcn/ui (5 components)│
│   ✗ No icons                                  ✓ Lucide React            │
│   ✗ No toast notifications                    ✓ react-hot-toast         │
│   ✗ No error boundary                         ✓ Built-in                │
│   ✗ Basic ESLint                              ✓ 25+ rules configured    │
│   ✗ No form validation                        ✓ RHF + Zod (optional)    │
│   ✗ No state management                       ✓ Redux (optional)        │
│   ✗ ~2 hours setup                            ✓ 15 seconds              │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Stop configuring. Start building.

---

Quick Start

npx create-modern-react my-app
cd my-app
yarn dev

That's it. Your app is running at http://localhost:3000

---

🚀 Try Before Install

Experience it live without downloading anything:

👆 Click above to see the full project running in your browser
No installation required • Full IDE in browser • See all features in action

---

What's Included

Core Stack (Every Project)

Technology	Version	Purpose
React	19	Actions, use() hook, server functions
TypeScript	5.9	Strict mode, full type safety
Vite + SWC	7	20x faster than Babel
Tailwind CSS	4	CSS-first config, @theme tokens
ESLint	9	Flat config, typescript-eslint
Shadcn/ui	Latest	Button, Input, Card, Skeleton, Separator
Wouter	3.5	2KB router (vs 28KB React Router)
Axios	1.8	Interceptors, cancel tokens
Lucide React	Latest	Beautiful, consistent icons

Optional Features

Select during project creation:

[ ] Redux Toolkit + Redux Persist ── State management with persistence
[ ] React Hook Form + Zod ────────── Type-safe form validation
[ ] Ant Design v5 ───────────────── Enterprise UI (replaces Shadcn/ui)
[ ] Husky + lint-staged ─────────── Git hooks for code quality

Build Optimizations

┌────────────────────┬────────────────────────────────────────┐
│ SWC Compiler       │ 20x faster than Babel                  │
├────────────────────┼────────────────────────────────────────┤
│ Gzip Compression   │ Pre-compressed .gz files (1KB thresh.) │
├────────────────────┼────────────────────────────────────────┤
│ Chunk Splitting    │ Separate vendor + router bundles       │
├────────────────────┼────────────────────────────────────────┤
│ Tree Shaking       │ Dead code elimination                  │
├────────────────────┼────────────────────────────────────────┤
│ Console Removal    │ Auto-stripped in production            │
├────────────────────┼────────────────────────────────────────┤
│ SVG Components     │ Import SVGs as React components        │
└────────────────────┴────────────────────────────────────────┘

---

Generated Structure

my-app/
├── .claude/
│   └── skills/               # 8 AI skills included (extensible)
├── src/
│   ├── components/
│   │   ├── ui/                 # Shadcn/ui components
│   │   │   ├── button.tsx
│   │   │   ├── input.tsx
│   │   │   ├── card.tsx
│   │   │   ├── skeleton.tsx
│   │   │   └── separator.tsx
│   │   └── layout/
│   │       ├── root-layout.tsx
│   │       └── error-boundary.tsx
│   ├── forms/                    # (optional) React Hook Form + Zod
│   │   ├── index.ts              # Barrel export
│   │   ├── use-zod-form.ts       # Custom hook with onBlur validation
│   │   └── types.ts              # Form TypeScript types
│   ├── hooks/
│   │   ├── use-loader.ts       # Loading state management
│   │   ├── use-debounce.ts     # Value debouncing
│   │   └── use-cancel-token.ts # Axios request cancellation
│   ├── routes/
│   │   └── index.tsx           # Wouter + lazy loading
│   ├── screens/
│   │   ├── home/
│   │   └── not-found/
│   ├── services/
│   │   ├── api/
│   │   │   ├── axios-instance.ts
│   │   │   └── api-helpers.ts  # getApi, postApi, patchApi...
│   │   └── alertify-services.ts
│   ├── providers/
│   │   └── theme-provider.tsx
│   ├── lib/
│   │   └── utils.ts            # cn() utility
│   └── types/
├── vite.config.ts              # SWC + SVGR + Tailwind + Compression
├── tsconfig.json               # Strict mode + path aliases (ES2022)
└── eslint.config.js            # ESLint 9 flat config, 25+ rules

🤖 AI-First Development

8 pre-configured Claude Code skills ship with every project:

Skill	Purpose
react-best-practices	Performance patterns from Vercel Engineering
frontend-design	Production-grade UI avoiding generic aesthetics
design-principles	Minimal design system (Linear/Notion/Stripe style)
ui-ux-pro-max	67 styles, 96 palettes, 56 font pairings
question-me	Socratic spec refinement
learn-together	Collaborative tech exploration
agent-browser	Browser automation & testing
autoskill	Session learning for AI patterns

Skills activate automatically with Claude Code. Add your own to .claude/skills/.

---

Features

SVG as React Components

import Logo from './logo.svg?react';

<Logo className="h-8 w-8 text-primary" />

Type-Safe API Layer

import { getApi, postApi } from '~/services/api';

const users = await getApi<User[]>('/users');
const newUser = await postApi<User>('/users', { name: 'John' });

Toast Notifications

import { Alertify } from '~/services/alertify-services';

Alertify.success('Saved successfully');
Alertify.error('Something went wrong');
Alertify.loading('Processing...');

Custom Hooks

// Loading state
const [isLoading, startLoader, endLoader] = useLoader();

const fetchData = async () => {
  startLoader();
  try {
    await getApi('/users');
  } finally {
    endLoader();
  }
};

// Debounced search
const debouncedQuery = useDebounce(searchQuery, 300);

// Cancel requests on unmount
const { cancelToken, cancel } = useCancelToken();

Type-Safe Form Validation (Optional)

import { z } from 'zod';
import { useZodForm } from '~/forms';

const loginSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8, 'Password must be 8+ characters'),
});

function LoginForm() {
  const form = useZodForm({ schema: loginSchema });

  return (
    <form onSubmit={form.handleSubmit(onSubmit)}>
      <input {...form.register('email')} />
      {form.formState.errors.email?.message}
    </form>
  );
}

UI-agnostic • Works with Shadcn, Antd, or plain HTML • Validates onBlur

Path Aliases

// ❌ Instead of this:
import { Button } from '../../../components/ui/button';

// ✅ Write this:
import { Button } from '~/components/ui';

---

Scripts

Command	Description
yarn dev	Start dev server (port 3000)
yarn build	Production build with gzip
yarn preview	Preview production build
yarn lint	Run ESLint
yarn lint:fix	Fix ESLint issues
yarn format	Format with Prettier

---

Build Output

dist/
├── assets/
│   ├── index-[hash].js         # Main bundle
│   ├── index-[hash].js.gz      # Gzipped (~70% smaller)
│   ├── vendor-[hash].js        # React + ReactDOM (cached)
│   ├── router-[hash].js        # Wouter (cached)
│   └── index-[hash].css.gz
└── index.html

---

Comparison

Feature	Vite	CRA	create-modern-react
Build Speed	Fast	Slow	Fastest (SWC)
TypeScript	✅	✅	✅ Strict
Tailwind CSS	❌	❌	✅
UI Components	❌	❌	✅
Routing	❌	❌	✅
API Layer	❌	❌	✅
Toast System	❌	❌	✅
Error Boundary	❌	❌	✅
Gzip Build	❌	❌	✅
SVG Components	❌	✅	✅
Dark Mode	❌	❌	✅
Path Aliases	❌	❌	✅
Setup Time	~1hr	~2hr	15 sec

---

Projects Created Using This Boilerplate

1. ResumeFreePro.com - Free AI-powered resume builder
2. HealthMug.com - Online pharmacy platform

Want to showcase your project? Open an issue to get featured!

---

CLI Options

npx create-modern-react my-app              # Interactive mode
npx create-modern-react my-app --skip-install  # Skip npm install
npx create-modern-react my-app --skip-git      # Skip git init

---

Requirements

• Node.js 20+
• npm, yarn, or pnpm

---

License

MIT © Abhay Rana

---

From npx to production-ready in 15 seconds.

⭐ Star on GitHub  ·  Report Bug  ·  Request Feature