@codingpixel/create-react

A CLI tool to scaffold production-ready React projects with Vite, TypeScript, Redux Toolkit, Tailwind CSS v4, and a complete UI component library.

Usage

# Using npx (recommended) - will prompt for project name
npx @codingpixel/create-react

# Or provide project name directly
npx @codingpixel/create-react my-app

# Using npm init
npm init @codingpixel/react my-app

Features

The generated project includes:

• React 19 with TypeScript 5
• Vite 7 with Fast Refresh
• React Router v7 for client-side routing
• Redux Toolkit + redux-persist for state management
• Tailwind CSS v4 + SCSS modules for styling
• Formik + Yup for form validation
• Axios with automatic token refresh
• 17+ UI Components ready to use

Project Naming Rules

• All letters are converted to lowercase (e.g., MyApp → myapp)
• Spaces are automatically replaced with dashes (e.g., my app → my-app)
• Special characters are removed
• Name must be at least 3 characters long

Generated Project Structure

my-app/
├── src/
│   ├── pages/                 # Page components
│   │   ├── auth/login/
│   │   ├── dashboard/
│   │   └── home/
│   ├── shared/
│   │   ├── assets/
│   │   │   ├── icons/         # SVG icons with index.ts
│   │   │   ├── images/        # Images with index.ts
│   │   │   └── fonts/         # Fonts with index.ts
│   │   ├── components/
│   │   │   ├── forms/         # Form components
│   │   │   ├── providers/     # Context providers
│   │   │   └── ui/            # UI primitives (17+ components)
│   │   └── lib/
│   │       ├── api/           # Axios + API client
│   │       ├── config/        # Routes, constants
│   │       ├── hooks/         # Custom hooks
│   │       ├── store/         # Redux store + slices
│   │       ├── types/         # TypeScript types
│   │       └── validations/   # Yup schemas
│   ├── App.tsx                # Root with routing
│   ├── main.tsx               # App entry + providers
│   └── index.css              # Global styles + theme tokens
├── public/                    # Static files served at root
├── .prompts/                  # AI prompts for complex tasks
│   └── admin-dashboard.md     # Prompt for building admin dashboards
├── .env.sample                # Environment template
├── README.md                  # Project documentation
└── package.json

What's Included

UI Components

• Layout: Accordion, Modal, Tabs, Pagination
• Forms: Button, Input, TextArea, Checkbox, ToggleSwitch, PhoneInput, FileUpload, Dropdown
• Feedback: Alert, Badge, Tooltip, Spinner, NoContentCard, Toast

Pages

• Home (component showcase)
• Login (with form validation)
• Dashboard (protected route)

Infrastructure

• Centralized route configuration
• Dark/light theme system with theme tokens
• Protected routes with authentication
• API client with token refresh
• Form validation schemas (Yup)
• Custom React hooks
• TypeScript types
• Redux store + slices with redux-persist
• Context providers

AI Assistance

• .prompts/ directory with ready-made prompts for complex tasks
• admin-dashboard.md prompt for scaffolding admin dashboards

After Creation

cd my-app
npm install
cp .env.sample .env
npm run dev

Requirements

• Node.js >= 18.0.0
• Git

License

MIT

Repository

https://github.com/codingpixel-developer/react-template