PHPackages                             luis-developer-08/yui-hero\_ui - 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. luis-developer-08/yui-hero\_ui

ActiveProject[Framework](/categories/framework)

luis-developer-08/yui-hero\_ui
==============================

This setup is designed for developers who want a lightweight, modern, and efficient foundation for building Laravel applications with a React frontend powered by InertiaJs and Hero UI

v1.1.3(1y ago)020MITJavaScriptPHP ^8.2

Since Mar 19Pushed 1y ago1 watchersCompare

[ Source](https://github.com/luis-developer-08/yui-hero_ui)[ Packagist](https://packagist.org/packages/luis-developer-08/yui-hero_ui)[ RSS](/packages/luis-developer-08-yui-hero-ui/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (6)Dependencies (17)Versions (11)Used By (0)

🌟 YUI INSTALLER 🌟
=================

[](#-yui-installer-)

🚀 Introduction
--------------

[](#-introduction)

Welcome to my personal laravel installer **YUI**! This setup is designed for developers who want a **lightweight, modern, and efficient** foundation for building Laravel applications with a React frontend powered by **[Inertia.js](https://inertiajs.com)**.

This kit is **JavaScript-first**, using **JSX instead of TSX**, making it accessible to developers who prefer plain JavaScript over TypeScript. It includes **React 19, TailwindCSS 4**, and Breeze for simple authentication and scaffolding.

---

🎯 Features
----------

[](#-features)

✔️ **Laravel** – Laravel provides a complete ecosystem for web artisans.
✔️ **Laravel Breeze** – Lightweight authentication with Inertia.js.
✔️ **Laravel Pulse** – delivers at-a-glance insights into your application's performance and usage.
✔️ **Orion** – The simplest way to create REST API with Laravel.
✔️ **Inertia.js** – Create modern single-page React, Vue, and Svelte apps using classic server-side routing.
✔️ **React 19 + JSX** – Simple, clean, and TypeScript-free.
✔️ **React Icons** – Include popular icons in your React projects easily with react-icons.
✔️ **TanStack Query** – Powerful asynchronous state management for TS/JS.
✔️ **Zustand** – A small, fast, and scalable bearbones state management solution.
✔️ **Laravel-Spatie-permission** – Associate users with roles and permissions.
✔️ **TailwindCSS 4** – Modern styling with utility-first CSS.
✔️ **Vite-Powered** – Lightning-fast HMR for smooth development.
✔️ **Pre-configured Testing** – Includes PHPUnit & Pest.
✔️ **Hero UI** – Beautiful, fast and modern React UI library for building accessible and customizable web applications.
✔️ **Quick Setup** – Get started in minutes!

---

🛠 Getting Started
-----------------

[](#-getting-started)

### 1️⃣ Install the Yui Installer

[](#1️⃣-install-the-yui-installer)

Install the Yui installer globally using Composer: **[luis-developer-08/yui-installer](https://packagist.org/packages/luis-developer-08/yui-installer)**

```
composer global require luis-developer-08/yui-installer
```

### 2️⃣ Create a New Laravel Project

[](#2️⃣-create-a-new-laravel-project)

Use the Yui installer to generate a new Laravel project:

```
yui new my-laravel-app
```

### 3️⃣ Select Your Database

[](#3️⃣-select-your-database)

During installation, you will be prompted to choose a database. Select the one you want by entering the corresponding number:

```
[0] sqlite
[1] mysql
```

### 4️⃣ Choose a UI Provider

[](#4️⃣-choose-a-ui-provider)

```
[0] None
[1] Hero UI
```

### 5️⃣ Navigate to Your Project Directory

[](#5️⃣-navigate-to-your-project-directory)

After the project is created, navigate to the project folder:

```
cd my-laravel-app
```

### 6️⃣ Start the Development Server

[](#6️⃣-start-the-development-server)

Run the following command to start the development server:

```
composer run dev
```

### 🎉 Your application is now configured and running!

[](#-your-application-is-now-configured-and-running)

---

⚡ Create Inertia Components Easily
----------------------------------

[](#-create-inertia-components-easily)

This starter kit includes a custom Artisan command to quickly generate Inertia.js React components with flexible directory options.

### 🏗️ Generate a New Component

[](#️-generate-a-new-component)

```
php artisan make:inertia Components/MyComponent
```

This will create:

```
resources/js/Components/MyComponent.jsx

```

### 📂 Flexible Folder Placement

[](#-flexible-folder-placement)

You can specify different folders using flags:

- `-c` or `--components`: Create the component in `resources/js/Components/`
- `-l` or `--layouts`: Create the component in `resources/js/Layouts/`
- `-s` or `--sections`: Create the component in `resources/js/Sections/`
- `-p` or `--pages`: Create the component in `resources/js/Pages/`

✅ **Example usage with flags:**

```
php artisan make:inertia Dashboard -p
```

Creates:

```
resources/js/Pages/Dashboard.jsx

```

You can also create nested folders like:

```
php artisan make:inertia Components/Auth/Login
```

Creates:

```
resources/js/Components/Auth/Login.jsx

```

### ✨ Example Generated Component

[](#-example-generated-component)

```
import React from "react";

const MyComponent = () => {
    return {/* MyComponent component */};
};

export default MyComponent;
```

### 🚀 Smart Behavior

[](#-smart-behavior)

- Automatically prevents duplicate folder nesting.
- Opens the newly created file in your default editor.
- Ensures the correct folder placement, whether using flags or specifying the path.

---

This command ensures that components are placed in the correct directory and prevents overwriting existing files. It also automatically opens the newly created file for editing.

---

⚡ Create Orion Controllers Easily
---------------------------------

[](#-create-orion-controllers-easily)

This starter kit also includes a command to quickly generate Orion controllers along with their associated models:

### 🏗️ Generate a New Orion Controller

[](#️-generate-a-new-orion-controller)

```
php artisan make:orion PostController
```

This will create:

- `app/Http/Controllers/Orion/PostController.php`
- `app/Models/Post.php` (if it doesn’t exist)
- Adds a route in `routes/api.php`

### 📂 File Structure

[](#-file-structure)

```
app/Http/Controllers/Orion/PostController.php
app/Models/Post.php

```

### ✨ Example Generated Controller

[](#-example-generated-controller)

```