114k
新建

Laravel

PreviousNext

为 Laravel 安装和配置 shadcn/ui。

shadcn CLI 不会为你创建新的 Laravel 应用。请先用 React starter kit 创建 Laravel 应用，然后选择你想要的 shadcn/ui 配置方式。

创建项目

使用 Laravel 安装器创建一个新的 Laravel 应用：

laravel new my-app

如果你已经有一个配置了 React 和 Inertia 的 Laravel 应用，可以跳过这一步。

提示时请选择 React starter kit。更多信息请参阅官方 Laravel 前端文档。

然后进入你的项目目录：

cd my-app
使用 shadcn/create

可视化构建预设并生成 Laravel 初始化命令。

使用 CLI

直接在终端中为你的 Laravel 应用配置 shadcn/ui。

使用 shadcn/create

构建你的预设

打开 shadcn/create 并以可视化方式构建你的预设。选择样式、颜色、字体、图标等。

打开 shadcn/create

运行命令

点击 Create Project，选择你的包管理器，然后复制生成的命令。

生成的命令看起来大致如下：

pnpm dlx shadcn@latest init --preset [CODE] --template laravel

请在你的 Laravel 应用根目录运行这条命令。

当系统询问是否覆盖 components.json 和 components 时，选择 Yes。

添加组件

向你的项目添加 Switch 组件：

pnpm dlx shadcn@latest add switch

上面的命令会把 Switch 组件添加到 resources/js/components/ui/switch.tsx。之后你可以像这样导入它：

resources/js/pages/index.tsx
import { Switch } from "@/components/ui/switch"
 
const MyPage = () => {
  return (
    <div>
      <Switch />
    </div>
  )
}
 
export default MyPage

使用 CLI

运行 CLI

从你的 Laravel 应用根目录运行 shadcn init 命令：

pnpm dlx shadcn@latest init

当系统询问是否覆盖 components.json 和 components 时，选择 Yes。

添加组件

向你的项目添加 Switch 组件：

pnpm dlx shadcn@latest add switch

上面的命令会把 Switch 组件添加到 resources/js/components/ui/switch.tsx。之后你可以像这样导入它：

resources/js/pages/index.tsx
import { Switch } from "@/components/ui/switch"
 
const MyPage = () => {
  return (
    <div>
      <Switch />
    </div>
  )
}
 
export default MyPage