PHPackages                             crenspire/yii3-react-starter - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Framework](/categories/framework)
4. /
5. crenspire/yii3-react-starter

ActiveProject[Framework](/categories/framework)

crenspire/yii3-react-starter
============================

Yii3 - Modern Starter Kit Using Inertia v2, React 19, ShadCN UI and Tailwind CSS 4+

20PHP

Since Jan 23Pushed 3mo agoCompare

[ Source](https://github.com/crenspire/yii3-react-starter)[ Packagist](https://packagist.org/packages/crenspire/yii3-react-starter)[ RSS](/packages/crenspire-yii3-react-starter/feed)WikiDiscussions develop Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

Yii3 React Starter Kit
======================

[](#yii3-react-starter-kit)

A modern, production-ready starter kit for building fast applications with Yii3, Inertia.js, React, and Tailwind CSS.

🚀 Features
----------

[](#-features)

- **10x Dev Experience** - Ship faster with opinionated PHP CS Fixer, maximum Psalm level, and Rector for enhanced code quality and developer productivity
- **Production Docker Ready** - Optimized Docker images with Yii3 and optimized setup for lightning-fast development and deployment
- **Advanced Authentication** - Complete authentication system with social login and role-based access control ready to implement
- **Payment Ready** - Payment integration ready for subscription billing and payment processing so you can focus on building your product
- **API Ready** - RESTful API endpoints with authentication and comprehensive documentation structure ready to implement
- **Customizable UI** - Built with shadcn/ui components, making UI customization a breeze. Easily modify themes, styles, and components to match your brand
- **AI Integration Ready** - Pre-configured structure for LLM integrations. Build AI-powered features into your app with minimal setup
- **Admin Panel Ready** - Structure ready for beautiful admin panel with CRUD operations, charts, and detailed analytics integration
- **Evolving Features** - Regular updates bring new features, integrations, and improvements to supercharge your development

🛠 Tech Stack
------------

[](#-tech-stack)

### Backend

[](#backend)

- **PHP 8.2+** - Modern PHP with latest features
- **Yii3** - High-performance PHP framework
- **Inertia.js 2.0** - Modern monolith approach
- **Composer** - PHP dependency management

### Frontend

[](#frontend)

- **React 18** - Modern UI library
- **Inertia.js React** - Seamless SPA experience
- **Vite 5** - Lightning-fast build tool
- **Tailwind CSS 4+** - Utility-first CSS framework
- **shadcn/ui** - Beautiful, accessible components
- **Lucide React** - Beautiful icon library

### Development Tools

[](#development-tools)

- **PHP CS Fixer** - Code style enforcement
- **Psalm** - Static analysis (maximum level)
- **Rector** - Automated refactoring
- **Docker** - Containerized development environment

📋 Requirements
--------------

[](#-requirements)

- PHP 8.2 or higher
- Composer 2.x
- Node.js 18+ and npm/yarn
- Docker (optional, for containerized setup)

🏗 Installation
--------------

[](#-installation)

### 1. Clone the repository

[](#1-clone-the-repository)

```
git clone https://github.com/your-org/yii3-react-starter-kit.git
cd yii3-react-starter-kit
```

### 2. Install PHP dependencies

[](#2-install-php-dependencies)

```
composer install
```

### 3. Install Node.js dependencies

[](#3-install-nodejs-dependencies)

```
npm install
# or
yarn install
```

### 4. Build frontend assets

[](#4-build-frontend-assets)

```
npm run build
# or
yarn build
```

### 5. Start the development server

[](#5-start-the-development-server)

```
# Start PHP server
composer serve

# In another terminal, start Vite dev server
npm run dev
# or
yarn dev
```

Visit `http://localhost:8080` to see your application.

🎨 Development Workflow
----------------------

[](#-development-workflow)

### Frontend Development

[](#frontend-development)

The starter kit uses Vite for fast development with Hot Module Replacement (HMR):

```
# Start Vite dev server (enables HMR)
npm run dev

# Build for production
npm run build
```

**Note:** The Vite dev server runs on port 5173, while the PHP server runs on port 8080. The application automatically detects and uses the dev server when available.

### Backend Development

[](#backend-development)

```
# Start PHP development server
composer serve

# Run tests
composer test

# Code style check
composer cs-check

# Code style fix
composer cs-fix

# Static analysis
composer psalm
```

📁 Project Structure
-------------------

[](#-project-structure)

```
yii3-react-starter-kit/
├── assets/
│   └── react/
│       └── src/
│           ├── components/      # React components
│           │   ├── ui/         # shadcn/ui components
│           │   ├── Layout.jsx
│           │   ├── Navigation.jsx
│           │   ├── Footer.jsx
│           │   └── ...
│           ├── pages/          # Inertia page components
│           ├── lib/            # Utility functions
│           ├── main.jsx        # React entry point
│           └── app.css        # Global styles
├── config/                     # Yii3 configuration
│   ├── common/                # Shared configuration
│   └── web/                   # Web-specific configuration
├── src/
│   ├── Controller/            # PHP controllers
│   ├── views/                 # Inertia root template
│   └── ...
├── public/                    # Public web root
│   └── dist/                  # Built frontend assets
├── docker/                    # Docker configuration
├── tests/                     # Test suites
├── composer.json              # PHP dependencies
├── package.json               # Node.js dependencies
├── vite.config.js             # Vite configuration
└── tailwind.config.js         # Tailwind CSS configuration

```

🎯 Usage
-------

[](#-usage)

### Creating a New Page

[](#creating-a-new-page)

1. **Create a React component** in `assets/react/src/pages/`:

```
// assets/react/src/pages/About.jsx
import React from 'react';
import Layout from '@/components/Layout';

export default function About() {
  return (

        About Us
        Your content here...

  );
}
```

2. **Register the component** in `assets/react/src/main.jsx`:

```
import About from './pages/About';

createInertiaApp({
  resolve: (name) => {
    const pages = {
      Home,
      About,  // Add your new page
    };
    return pages[name];
  },
  // ...
});
```

3. **Create a PHP controller** in `src/Controller/`:

```