Petal Components：從 README 拆解使用邊界
Phoenix + 即時查看 HEEX 組件。 Petal Components AI助理可以實際使用的Shadcn風格的Phoenix組件。
秒懂
- 它是什麼？
- 一個提供可組合 HEEx 元件的 Hex 套件，附帶託管 MCP 伺服器，將元件模式暴露給 AI 編碼工具。
- 適合誰用？
- 該函式庫使用 MIT 授權，README 指向公共路線圖、示範遊樂場以及包括樣板和 Figma 套件在內的配套專案。檢視目前元件清單最可靠的方式是呼叫 MCP 伺服器上的 list_components，因為 README 只凸顯了一部分。
- 可以商用嗎？
- 可以。MIT 是寬鬆授權：你可以使用、修改並販售以它為基礎的軟體，只需保留著作權與授權聲明。
- 還在維護嗎？
- 有在維護。儲存庫最近一次提交在 13 天前。
- 用什麼語言寫的？
- 主要是 Elixir（依據 GitHub 的語言統計）。
以上回答依據專案的 GitHub 資料（最近同步於 2026年9月14日）與我們的分析，不構成法律意見。
開源專案深度解析
面向 Phoenix LiveView 的 shadcn 風格元件集：入口與定位
一個提供可組合 HEEx 元件的 Hex 套件，附帶託管 MCP 伺服器，將元件模式暴露給 AI 編碼工具。 本文只採用 petalframework-petal-components README 已寫明的功能、數字、版本與限制，將它們放回實際使用者會遇到的選擇中。 Petal Components 是一個 Elixir Hex 套件，為 Phoenix LiveView 應用程式提供一組 HEEx 元件：按鈕、表單、模態框、表格、卡片等。這些元件使用 Tailwind v4 建置，可在 live 檢視和 dead 檢視中工作。README 將其設計描述為與 React 的 shadcn 相同的思想：可組合的原語，由你擁有，沒有單一的主題系統。該函式庫還包含一個位於 mcp.petal.build 的託管 MCP 伺服器，將每個元件的模式暴露給 AI 編碼工具，因此 Claude Code、Cursor、Codex 和 Windsurf 等工具可以呼叫元件並附帶正確的屬性，而不是根據訓練資料產生原始的 Tailwind 標記。README 沒有說明套件中有多少元件，只在目錄部分提到 30+。（第 1 節的專案脈絡） Petal Components 是一個 Elixir Hex 套件，為 Phoenix LiveView 應用程式提供一組 HEEx 元件：按鈕、表單、模態框、表格、卡片等。這些元件使用 Tailwind v4 建置，可在 live 檢視和 dead 檢視中工作。README 將其設計描述為與 React 的 shadcn 相同的思想：可組合的原語，由你擁有，沒有單一的主題系統。該函式庫還包含一個位於 mcp.petal.build 的託管 MCP 伺服器，將每個元件的模式暴露給 AI 編碼工具，因此 Claude Code、Cursor、Codex 和 Windsurf 等工具可以呼叫元件並附帶正確的屬性，而不是根據訓練資料產生原始的 Tailwind 標記。README 沒有說明套件中有多少元件，只在目錄部分提到 30+。
推薦的安裝路徑是一個兩步過程。首先，使用命令 `claude mcp add petal --transport http https://mcp.petal.build/mcp` 一次性新增 MCP 伺服器。然後，在任何 Phoenix 專案中，告訴你的 AI 安裝 petal_components。代理會呼叫 MCP 上的 ge（針對 petalframework-petal-components 的第 1 項核對） 在 petalframework-petal-components 的脈絡下，這一節的判斷不是把 README 改寫成宣傳語，而是指出條件如何影響使用。請把 petalframework-petal-components、README、實際命令與輸出放在同一份紀錄中，檢查輸入是否被正確接受、結果是否符合文件描述，以及限制是否在你的平台重現。這個核對點只對應本節的 入口，不把其他專案的經驗移植過來。
透過 MCP 伺服器或手動安裝：資料與執行邊界
閱讀 petalframework-petal-components 時，先分清專案宣稱的入口、依賴條件與輸出物。README 中的命令、檔案路徑和設定名稱，比抽象的效能形容更能界定它適合的工作。 推薦的安裝路徑是一個兩步過程。首先，使用命令 `claude mcp add petal --transport http https://mcp.petal.build/mcp` 一次性新增 MCP 伺服器。然後，在任何 Phoenix 專案中，告訴你的 AI 安裝 petal_components。代理會呼叫 MCP 上的 get_install_instructions，應用對 mix.exs 的變更，執行 mix deps.get，修補 assets/css/app.css，並向你的 web 模組新增 use PetalComponents。README 說這適用於 umbrella 應用程式和標準 Phoenix 專案。手動方式需要在 mix.exs 中新增 {:petal_components, "~> 4.0"}，可選地新增 {:mdex, "~> 0.12"} 用於聊天 markdown 元件，然後在 app.css 中匯入 Tailwind 和預設 CSS，向 web 模組新增 use PetalComponents，並在 app.js 中註冊捆綁的 JS 鉤子，用於密碼、可複製、可清除輸入和聊天元件。README 指出，函式庫的其餘部分僅使用 CSS 和 LiveView.JS。之後執行 mix deps.get 和 mix compile。（第 2 節的專案脈絡） t_install_instructions，應用對 mix.exs 的變更，執行 mix deps.get，修補 assets/css/app.css，並向你的 web 模組新增 use PetalComponents。README 說這適用於 umbrella 應用程式和標準 Phoenix 專案。手動方式需要在 mix.exs 中新增 {:petal_components, "~> 4.0"}，可選地新增 {:mdex, "~> 0.12"} 用於聊天 markdown 元件，然後在 app.css 中匯入 Tailwind 和預設 CSS，向 web 模組新增 use PetalComponents，並在 app.js 中註冊捆綁的 JS 鉤子，用於密碼、可複製、可清除輸入和聊天元件。README 指出，函式庫的其餘部分僅使用 CSS 和 LiveView.JS。之後執行 mix deps.get 和 mix compile。
位於 mcp.petal.build 的配套 MCP 伺服器是元件模式的標準來源。README 指導 AI 工具呼叫 list_components，然後在需要細節時呼叫 get_component。有一個 rules.md （針對 petalframework-petal-components 的第 2 項核對） 在 petalframework-petal-components 的脈絡下，這一節的判斷不是把 README 改寫成宣傳語，而是指出條件如何影響使用。請把 petalframework-petal-components、README、實際命令與輸出放在同一份紀錄中，檢查輸入是否被正確接受、結果是否符合文件描述，以及限制是否在你的平台重現。這個核對點只對應本節的 資料，不把其他專案的經驗移植過來。
MCP 伺服器如何為 AI 工具工作：效能或功能取捨
對 petalframework-petal-components 的限制不能被標題或單一範例掩蓋。若 README 只描述某個平台、資料格式或測試條件，這個範圍就是判讀結果的邊界，不能延伸成未提供的承諾。 位於 mcp.petal.build 的配套 MCP 伺服器是元件模式的標準來源。README 指導 AI 工具呼叫 list_components，然後在需要細節時呼叫 get_component。有一個 rules.md 檔案作為標準指令集，涵蓋元件命名對應、常見模式（如 card 中的表單、modal 中的表單）以及規則：在手工編寫 HEEx 之前始終使用現有的 petal_components 標籤。README 沒有說明 MCP 伺服器是否需要驗證或是否有速率限制。它也無法記錄模式格式本身；即時文件和 rules.md 是最接近的參考。對於 Cursor、Windsurf、Continue、Codex 和 Cline，README 指向 https://petal.build/petal-components 上每個工具的安裝命令。（第 3 節的專案脈絡） 檔案作為標準指令集，涵蓋元件命名對應、常見模式（如 card 中的表單、modal 中的表單）以及規則：在手工編寫 HEEx 之前始終使用現有的 petal_components 標籤。README 沒有說明 MCP 伺服器是否需要驗證或是否有速率限制。它也無法記錄模式格式本身；即時文件和 rules.md 是最接近的參考。對於 Cursor、Windsurf、Continue、Codex 和 Cline，README 指向 https://petal.build/petal-components 上每個工具的安裝命令。
README 列出了 30 多個元件，涵蓋多個類別：佈局和內容（container、card、標題、accordion、tabs、stepper、skeleton）、表單（field、text_input、select、checkbox、radio_group、switch、textarea、date_input、file_input）、操作（button、button_group、dropdown、menu、user_dropdown_menu）、回饋（alert、modal、slide_over、popover、tooltip、progr（針對 petalframework-petal-components 的第 3 項核對） 在 petalframework-petal-components 的脈絡下，這一節的判斷不是把 README 改寫成宣傳語，而是指出條件如何影響使用。請把 petalframework-petal-components、README、實際命令與輸出放在同一份紀錄中，檢查輸入是否被正確接受、結果是否符合文件描述，以及限制是否在你的平台重現。這個核對點只對應本節的 效能，不把其他專案的經驗移植過來。
元件目錄和範例：實際核對方式
採用前可針對 petalframework-petal-components 的專屬入口做小型核對：使用 README 指定的命令或檔案，觀察實際輸出、錯誤訊息、資源用量與版本差異。這些觀察點要和文中聲稱的能力逐項對照。 README 列出了 30 多個元件，涵蓋多個類別：佈局和內容（container、card、標題、accordion、tabs、stepper、skeleton）、表單（field、text_input、select、checkbox、radio_group、switch、textarea、date_input、file_input）、操作（button、button_group、dropdown、menu、user_dropdown_menu）、回饋（alert、modal、slide_over、popover、tooltip、progress、spinner、rating）和資料展示（table、pagination、breadcrumbs、badge、avatar、marquee、icon、link）。MCP 伺服器被描述為即時清單；呼叫 list_components 取得目前集合。README 包含幾個程式碼範例：卡片內的表單、帶表單的模態框、帶列操作的表格以及載入按鈕。表格範例使用 :col 插槽來渲染帶有 size 和 variant 的按鈕。視覺網格位於 petal.build/components，即時遊樂場位於 petal-components-demo.fly.dev。（第 4 節的專案脈絡） ess、spinner、rating）和資料展示（table、pagination、breadcrumbs、badge、avatar、marquee、icon、link）。MCP 伺服器被描述為即時清單；呼叫 list_components 取得目前集合。README 包含幾個程式碼範例：卡片內的表單、帶表單的模態框、帶列操作的表格以及載入按鈕。表格範例使用 :col 插槽來渲染帶有 size 和 variant 的按鈕。視覺網格位於 petal.build/components，即時遊樂場位於 petal-components-demo.fly.dev。
README 直接將專案與 React 元件庫 shadcn 進行比較。共同的理念是可組合的原語和沒有單一主題系統；區別在於執行時期（HEEx 而不是 JSX）和分發方式（Hex 套件而不是複製檔案的 CLI）。petal_pro 是一個基於 petal_components 建置的付費 SaaS 樣板，README 稱其為現實世界組合的最佳參考。配套專案包括 petal-components-mcp（MCP 伺服器原始碼）、petal_boilerplate（一個預先設定元件的全新 Phoenix 安裝（針對 petalframework-petal-components 的第 4 項核對） 在 petalframework-petal-components 的脈絡下，這一節的判斷不是把 README 改寫成宣傳語，而是指出條件如何影響使用。請把 petalframework-petal-components、README、實際命令與輸出放在同一份紀錄中，檢查輸入是否被正確接受、結果是否符合文件描述，以及限制是否在你的平台重現。這個核對點只對應本節的 命令，不把其他專案的經驗移植過來。
與 shadcn 的關係及更廣泛的生態系統：適用範圍
petalframework-petal-components 的取捨最後取決於你的輸入和部署環境。適合需要 README 所列能力、能接受其平台與成熟度限制的人；若需求落在文件未說明的範圍，應先把缺口視為未知，而不是自行補上。 README 直接將專案與 React 元件庫 shadcn 進行比較。共同的理念是可組合的原語和沒有單一主題系統；區別在於執行時期（HEEx 而不是 JSX）和分發方式（Hex 套件而不是複製檔案的 CLI）。petal_pro 是一個基於 petal_components 建置的付費 SaaS 樣板，README 稱其為現實世界組合的最佳參考。配套專案包括 petal-components-mcp（MCP 伺服器原始碼）、petal_boilerplate（一個預先設定元件的全新 Phoenix 安裝）、官方 Figma 套件以及包含 65 多個程式碼片段的 VSCode 擴充功能。致謝中列出了 phoenix_playground、Phoenix 和 LiveView、Tailwind CSS、Apache ECharts（用於 chart 元件）和 Heroicons（用於 icon 元件）。（第 5 節的專案脈絡） ）、官方 Figma 套件以及包含 65 多個程式碼片段的 VSCode 擴充功能。致謝中列出了 phoenix_playground、Phoenix 和 LiveView、Tailwind CSS、Apache ECharts（用於 chart 元件）和 Heroicons（用於 icon 元件）。
該儲存庫支援沒有 umbrella 的獨立開發伺服器。克隆後，執行 mix deps.get、mix tailwind.install，然後執行 iex -S mix run dev.exs，這會啟動一個位於 localhost:4000 的遊樂場，渲染每個元件，並在編輯 lib/ 時即時重新載入。測試透過 mix test 執行。對於貢獻，README 指向公共路線圖以建議元件，並接受拉取請求。還有一個名為 petal_development 的獨立 Phoenix umbrella 應用程式，將 petal_components 作為子模組用於整合測試。授權是 MIT，版權歸 Matthew Platts 所有。授權文字授予使用、複製、修改、合併、發布、分發、再授權和銷售軟體副本的權利，並說明軟體按"原樣"提供，不附帶任何形式的保證，但未提及安全狀況或支援。（針對 petalframework-petal-components 的第 5 項核對） 在 petalframework-petal-components 的脈絡下，這一節的判斷不是把 README 改寫成宣傳語，而是指出條件如何影響使用。請把 petalframework-petal-components、README、實際命令與輸出放在同一份紀錄中，檢查輸入是否被正確接受、結果是否符合文件描述，以及限制是否在你的平台重現。這個核對點只對應本節的 範圍，不把其他專案的經驗移植過來。
編輯結論
該函式庫使用 MIT 授權，README 指向公共路線圖、示範遊樂場以及包括樣板和 Figma 套件在內的配套專案。檢視目前元件清單最可靠的方式是呼叫 MCP 伺服器上的 list_components，因為 README 只凸顯了一部分。 適合需要 petalframework-petal-components README 所列能力、並能接受文件範圍的人；不適合把未說明的行為當成保證。先依 README 的專屬命令、設定或檔案完成一個最小案例，逐項觀察輸出與錯誤，再決定是否放進正式流程。
社群筆記