# Laravel · JGuang UI

> 本页提供 JGuang UI 技术内容、中文导航与术语适配。

- 页面: https://jiguang132.com/zh/systems/jguang-ui/docs/installation/laravel
- 改编自: shadcn/ui 文档 (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c
- 说明：正文保留英文原文。

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:

```bash
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](https://laravel.com/docs/12.x/frontend).

Then move into your project directory:

```bash
cd my-app
```


  

[Use JGuang UI installation Build your preset visually and generate a Laravel init command.](#configure-with-create)


  

[Use the CLI Configure JGuang UI in your Laravel app directly from the terminal.](#configure-with-cli)


## Use JGuang UI installation


### Build Your Preset

Open [JGuang UI installation](/systems/jguang-ui#install) and build your preset visually. Choose your style, colors, fonts, icons, and more.


  

[Open JGuang UI installation](/systems/jguang-ui#install)


### Run the Command

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

The generated command will look similar to this:

```text
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:

```text
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:

```tsx title="resources/js/pages/index.tsx" showLineNumbers {1,6}
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:

```text
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:

```text
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:

```tsx title="resources/js/pages/index.tsx" showLineNumbers {1,6}
import { Switch } from "@/components/ui/switch"

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

export default MyPage
```

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt