目前有很多css框架，例如bootstrap、bulma、semantic ui等。這可以加快構建顯示（用戶界面）的速度。目前流行的 css 工具之一是 shadcn/ui，它之前是什么？
在其官方網站shadcn/ui上表示
“我們可以復制并粘貼到我們的應用程序中的可重用組件的集合?！?
所以 shadcn/ui 是視圖中可重用組件的集合，使用 tailwindcss 和 radixui 構建。目前支持next.js、laravel等多個框架?？梢栽诠倬Wshadcn/ui上看到。
來自支持的許多框架。我們的主要目標是如何使用 laravel breeze 在 laravel react 上安裝 shadcn/ui。
第一步：安裝laravel項目。
laravel new laravel-shadcn
登錄后復制
這里我們使用 laravel 安裝程序（全局）。在下一階段，我們將被要求選擇一個選項，如下圖所示
根據您的項目需求填寫。如果是這樣，請等待安裝完成。安裝速度取決于您的互聯網連接。
laravel 項目安裝完成。好的繼續！.
第二步：在laravel項目上安裝shadcn/ui
仍然在同一個航站樓。首先，輸入以下命令：
cd laravel-shadcn npx shadcn-ui@latest init
登錄后復制
如果是這樣，就會出現一個請求，根據您的需要填寫。如下例所示。
would you like to use typescript (recommended)? no which style would you like to use? ? default which color would you like to use as base color? ? slate where is your global css file? ? resources/css/app.css do you want to use css variables for colors? ? yes where is your tailwind.config.js located? ? tailwind.config.js configure the import alias for components: ? @/components configure the import alias for utils: ? @/lib/utils are you using react server components? ? no
登錄后復制
如果您是 typescript 用戶，您可以選擇是、確定、下一步。轉到 vscode 或根據您最喜歡的代碼編輯器。這里我使用 vscode 然后只需使用以下命令
cd laravel-shadcn code .
登錄后復制
它將自動打開 vscode 以及打開你的 laravel 項目。如果是這樣，下一步就是打開resource/css/app.css文件夾中的app.css文件，確保shadcnui已經成功安裝在我們的laravel項目中
上圖中shadcn已經成功安裝到我們的laravel項目上
說明：
shadcn會自動更新app.css文件
當我們需要按鈕、警報、表格等組件時。然后我們需要通過 laravel 項目的根終端安裝它。 （需要互聯網連接）
您需要的所有組件都可以在shadcnui官方網站上看到
當你安裝完組件后，我們會在resources/js/components/ui/button.jsx文件夾中自動生成一個新文件，我們也可以根據自己的意愿修改這個文件。
第三步：確保shadcn已安裝
為了確保 shadcnui 已安裝，我們可以在終端中發出命令。即例如我們要安裝按鈕組件，命令是：npx shadcn-ui@latest 添加按鈕如下圖所示
然后打開welcome.jsx文件并按照下圖操作。
如果是這樣的話。打開兩個具有相同目錄的終端，即 laravel-shadcn
1號航站樓
npm run dev
登錄后復制
2號航站樓
php artisan serve
登錄后復制
然后在瀏覽器中打開它，就會出現按鈕組件，它是
默認顏色深色。
