Laravel

The JGuang UI CLI does not scaffold a new Laravel app. Start by creating a Laravel app with the React starter kit, then choose how you want to configure JGuang UI.

Create Project

Create a new Laravel app using the Laravel installer:

laravel new my-app

If you already have a Laravel app with React and Inertia configured, skip this step.

Choose the React starter kit when prompted. For more information, see the official Laravel frontend documentation.

Then move into your project directory:

cd my-app

Use JGuang UI installation Build your preset visually and generate a Laravel init command.

Use the CLI Configure JGuang UI in your Laravel app directly from the terminal.

Use JGuang UI installation

Build Your Preset

Open JGuang UI installation and build your preset visually. Choose your style, colors, fonts, icons, and more.

Open JGuang UI installation

Run the Command

Click Create Project, choose your package manager, and copy the generated command.

The generated command will look similar to this:

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Run the command from the root of your Laravel app.

When asked to overwrite components.json and components, choose Yes.

Add Components

Add the Switch component to your project:

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

The command above will add the Switch component to resources/js/components/ui/switch.tsx. You can then import it like this:

import { Switch } from "@/components/ui/switch"

const MyPage = () => {
  return (
    <div>
      <Switch />
    </div>
  )
}

export default MyPage

Use the CLI

Run the CLI

Run the JGuang UI Registry init command from the root of your Laravel app:

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

When asked to overwrite components.json and components, choose Yes.

Add Components

Add the Switch component to your project:

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

The command above will add the Switch component to resources/js/components/ui/switch.tsx. You can then import it like this:

import { Switch } from "@/components/ui/switch"

const MyPage = () => {
  return (
    <div>
      <Switch />
    </div>
  )
}

export default MyPage