petalframework/petal_components：README に基づく導入ガイド

petalframework/petal_components の README はプロジェクトを「Phoenix + Live View HEEX Components」と説明しています。ここではリポジトリで確認できる事実だけを整理します。star 数やバッジは注目度の手掛かりであり、品質の証明ではありません。「The 30-second pitch」には次の説明があります。Petal Components gives Phoenix LiveView apps a shadcn-style set of HEEx components: buttons, forms, modals, tables, cards, and more. They are built with Tailwind v4 and work in live or dead views.。これは範囲の説明であり、本番検証の結果ではありません。

README の「For AI coding tools」にある内容から、用途が合うかを先に判断できます。The component naming map (HEEx tag form, module path, CSS class prefix)。目的が違うなら、人気だけで採用する理由にはなりません。プロジェクト名やコマンドは原文のまま残し、一次資料へ戻って用語を確認できるようにしています。 README には次の確認可能な項目もあります。Always reach for an existing petalcomponents tag before hand-rolling HEEx。初回テストの材料にはなりますが、実際の環境での確認を省略する理由にはなりません。

動作の説明は「The 30-second pitch」など複数の箇所に分かれています。確認できる情報は次の通りです。If you have used shadcn in React, you already know the shape. Same idea, composable primitives, you own the patterns, AI tools read the schema and call it correctly. We just write HEEx, not JSX.。書かれていない構成、性能、セキュリティを推測で補いません。導入時はディレクトリ、設定ファイル、release 履歴を確認してください。

初回導入は README の入口から始めます。確認できるコマンドは次の通りです。 git clone https://github.com/petalframework/petal_components.git cd petal_components mix deps.get mix tailwind.install iex -S mix run dev.exs 実行可能なコマンドがない場合は手順を作らず、「Install」で依存関係、待受ポート、初回設定を確認します。

日常運用は公式文書の範囲に限ります。「The two-step way (recommended)」にはThe agent calls getinstallinstructions on the MCP, applies the changes to your mix.exs, runs mix deps.get, patches assets/css/app.css, and adds use PetalComponents to your web module. Works in umbrella apps and standard Phoenix projects.とあります。設定、環境変数、権限、データ保存先は明記されたものだけを扱います。未記載の既定値は隔離環境で確認し、戻せる設定を保存してください。 同じ資料にはCommon patterns (form-in-card, modal-with-form, table-with-actions)ともあります。