templui

templUI と shadcn-templ

まず世代を選択する

例を選んだり依存関係をインストールしたりする前に、go.mod、コンポーネントのインポート、.templui.json、components.json、ローカルのコンポーネントソースを調べてください。コピーされた v1 コンポーネントにはモジュール依存関係がない場合があります。スキーマと由来を確認せずに、components.json だけで判断することはできません。

• レガシー： github.com/templui/templui、.templui.json、v1 コンポーネントソース、または templUI Pro／goilerplate v1～v2 の元のブロック。依存する編集を行う前に、アップグレードするかどうかを確認してください。
• 現行： github.com/axadrn/shadcn-templ/v2、または shadcn-templ v2 の設定／ソース。shadcn-templ.md を読み、以下の v1 の例がそのまま適用できるとは考えないでください。
• 混在／不明： 実際の API を調べ、どの世代を対象にするか確認してください。

新しいタスクでレガシーの使用が見つかった場合は、必ず次のように尋ねてください。

これはレガシーの templUI v1 を使用しています。shadcn-templ にアップグレードしますか、それともこのタスクでは v1 を使い続けますか？

利用可能であれば、現在の画面の質問 UI を使い、回答に依存する編集を始める前に返答を待ってください。読み取り専用の調査は続けてもかまいません。このタスク内ですでに明示された選択を尊重してください。後のタスクでレガシーの使用が見つかった場合は、改めて確認してください。アップグレードする場合は、編集前にコンポーネント、CSS、JavaScript の変更点を説明し、移行範囲について合意してください。UI のアップグレードを、goilerplate でアプリを再生成する許可と解釈しないでください。

新規プロジェクトでは shadcn-templ を提案し、現在のリリース状況を確認してください（v2 のドキュメントでは現在ベータとされています）。ユーザーが v1 を選択した場合は、以下のレガシー向け参照情報を使ってください。古いスキャフォールドテンプレートを通じて、v1 を黙って導入しないでください。

元の 222 個のプレミアムブロックは v1 で凍結されており、新しい公開版の shadcn-templ blocks とは別のものです。ライセンス対象のレガシーカタログを調べるために利用できる、インストール済みの非公開 templui-pro スキルがある場合は、それを使ってください。ない場合は、ユーザーが利用を許可されたローカルライブラリを提示するよう依頼してください。プレミアムソースを捏造したり、このプラグインに同梱したりしないでください。

レガシー v1 のガイダンス

現在のタスクで v1 を使い続けるとユーザーが選択した場合に限り、以下を使用してください。

重要：templUI はバニラ JavaScript を使用します（JS フレームワークは不要）

templui.io によると、「JS フレームワークは不要。バニラのまま。高速です。」templUI のコンポーネントは、あらゆるインタラクティブ機能（ポップオーバー、ドロップダウン、ダイアログ、タブなど）に Script() テンプレートを介したバニラ JavaScript を使用します。Alpine.js、React、Vue、その他のフレームワークには依存しません。

以前のバージョンの templUI は Alpine.js と統合されていましたが、その依存関係は削除されています。 templUI のコンポーネント内で x-data／x-show／x-if ディレクティブに言及するドキュメントやコードを見つけた場合、それは古い情報です。

フロントエンドの構成

ツール	用途	使用例
templUI	事前構築済みの UI コンポーネント（バニラ JS）	ドロップダウン、ダイアログ、タブ、サイドバー、ポップオーバー、アコーディオン
HTMX	サーバー駆動のインタラクション	AJAX、フォーム送信、ページの部分更新、ライブ検索
Alpine.js (optional)	軽量なクライアント側の状態管理	トグル、アニメーション、クライアント側のフィルタリング、トランジション — templUI との統合ではなく、templUI と併用します。HTMX + Script() で提供される以上のリアクティブな状態レイヤーが不要なら、使用を省略してください。
Floating UI	位置決めのプリミティブ（templUI 内部で使用）	ツールチップ、ポップオーバー、ドロップダウン — 通常、ユーザーが意識することはありません

---

参照ファイル

詳しいパターン、コード例、トラブルシューティングについては、該当するファイルを読んでください。

htmx-alpine-integration.md — HTMX + Alpine.js（任意、templUI とは別）

templUI と併用するクライアント側の状態レイヤーとして Alpine.js を追加するアプリ向けです。Alpine を実際に使用する場合に限り読んでください。HTMX と Alpine のどちらを使うか、または併用するかの判断基準、スワップ後に状態を保持する Alpine-Morph 拡張機能、Alpine の条件分岐における htmx.process()、Alpine から HTMX をトリガーする方法を扱います。Alpine を使わず、templUI + HTMX + Script() を使用するアプリでは省略してください。これは templUI が推奨する構成です。

templ-interpolation.md — 重要：JavaScript での Templ 補間

Go の式 { value } は <script> タグ内では補間されません。解決するための 5 つのパターン：

1. データ属性（推奨）— data-* 属性と this.dataset
2. templ.JSFuncCall — 自動的に JSON エンコードし、XSS を防止します
3. 二重波括弧 — <script> タグ内の {{ value }}
4. templ.JSONString — 属性または templ.JSONScript を介した複雑な構造体／マップ
5. templ.OnceHandle — ループ内でスクリプトが一度だけレンダリングされるようにします

使い分け表とよくある間違いも含まれています。

templui-cli.md — templUI CLI ツール

インストール、初期化、コンポーネントの追加、強制更新、利用可能な項目の一覧表示を行います。既存のプロジェクトに合わせて、モジュールインポートまたは CLI によるコピーのワークフローを選択してください。これらは異なるインポートパスを使用します。

script-templates.md — Script() テンプレート（必須）

JavaScript を必要とするコンポーネントでは、ベースレイアウトの <head> に Script() 呼び出しが必要です。すべての Script() インポート（ポップオーバー、ドロップダウン、ダイアログ、アコーディオン、タブ、カルーセル、トースト、クリップボード）、コンポーネントの依存関係表、コンポーネントが動作しない場合のトラブルシューティングを一覧にしています。

conversion-and-audit.md — サイトの変換と監査

HTML／React／Vue を Go／Templ に変換するためのプロセス、構文の対応関係、パッケージ構造について説明します。Templ 構文のクイックリファレンス（プロパティ、条件分岐、ループ、合成）、Script() 呼び出し、CLI のインストール、一貫性、ダークモード、レスポンシブ対応に関する監査チェックリストも含まれています。インポートパターン、トラブルシューティングガイド、templUI、HTMX+Alpine、templ のドキュメントへのリソースリンクも掲載しています。