目前有許多CSS框架，例如Bootstrap、Bulma、Semantic UI等。這可以加快建置顯示（使用者介面）的速度。目前流行的 CSS 工具之一是 Shadcn/ui，它之前是什麼？

Shadcn/ui官網註明

「我們可以將其複製並貼上到我們的應用程式中的可重複使用元件的集合。」

所以 shadcn/ui 是視圖中可重複使用元件的集合，使用 TailwindCSS 和 RadixUI 建構。目前支援Next.js、Laravel等多個框架。可以在官網Shadcn/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

然後在瀏覽器中開啟它，就會出現按鈕元件，預設顏色為深色。