Blade と HTML
Blade コンポーネントと素の HTML はどういう関係か — 何が自動で、何が手動かを正直に説明します。
結論: 片方向は自動、逆方向は手動
ドキュメントの 2 タブの仕組み
各コンポーネントページの「使い方」セクションには Blade / HTML の 2 タブがあります。HTML タブは Blade::render() でその場で生成されるため、ライブラリがバージョンアップしてもドキュメントの HTML が古くなることはありません。下はこのページに埋め込んだ実物です:
<x-button color="primary" icon="rocket">Launch</x-button>
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 bg-primary text-primary-content border-primary hover:bg-primary/90 focus-visible:ring-primary cursor-pointer"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="currentColor" fill-rule="evenodd" d="m14.447 16.377l5.847-5.83c.842-.839 1.263-1.259 1.484-1.792S22 7.627 22 6.44v-.567c0-1.826 0-2.739-.569-3.306S19.947 2 18.116 2h-.57c-1.19 0-1.785 0-2.32.221c-.536.221-.957.641-1.8 1.48L7.58 9.531c-.984.98-1.594 1.589-1.83 2.176a1.5 1.5 0 0 0-.112.562c0 .802.647 1.448 1.942 2.739l.174.173l2.038-2.069a.75.75 0 1 1 1.069 1.053L8.816 16.24l.137.137c1.295 1.29 1.943 1.936 2.747 1.936c.178 0 .348-.031.519-.094c.603-.222 1.219-.836 2.228-1.842m2.747-6.846a1.946 1.946 0 0 1-2.747 0a1.93 1.93 0 0 1 0-2.738a1.946 1.946 0 0 1 2.747 0a1.93 1.93 0 0 1 0 2.738" clip-rule="evenodd"></path>
<path fill="currentColor" d="M9.034 5.963L6.491 8.5c-.467.466-.896.893-1.235 1.28a6 6 0 0 0-.619.82l-.024-.025l-.095-.094a4.9 4.9 0 0 0-1.532-1.004l-.123-.05l-.379-.15a.764.764 0 0 1-.259-1.252C3.345 6.907 4.69 5.566 5.34 5.297a3.4 3.4 0 0 1 1.788-.229c.546.081 1.063.362 1.907.895m4.342 13.35c.205.208.34.355.464.512q.243.311.434.658c.142.26.253.537.474 1.092a.69.69 0 0 0 1.126.224l.084-.083c1.12-1.117 2.465-2.458 2.735-3.105a3.35 3.35 0 0 0 .229-1.782c-.081-.545-.362-1.06-.897-1.902l-2.552 2.544c-.478.477-.916.914-1.313 1.256c-.237.206-.497.41-.784.586" opacity=".3"></path></svg> Launch</button>
HTML 側だけを使う（Blade なしのプロジェクト）
HTML タブの出力は素の HTML + クラス文字列なので、Blade を使わないプロジェクトにコピーして使えます。ただし 2 つ必要なものがあります:
- コンパイル済み CSS — クラスはテーマトークン（bg-primary など）とチューントークン（p-md、var(--radius-box) など）を参照します。現在の公式配布は Composer パッケージ経由のビルドのみで、スタンドアロンの CSS パッケージ（npm）は準備中です。
- Alpine.js — 動的コンポーネント（modal / tabs / dropdown など）の HTML 出力には x-data 属性がそのまま含まれます。ページに Alpine.js（+ @alpinejs/focus / @alpinejs/collapse）を読み込めばコピーした HTML がそのまま動きます。静的コンポーネント（button / badge / card など）は JS 不要です。
逆方向: 既存の HTML を Blade に置き換える
自動変換はありませんが、手順は単純です:
- コンポーネント一覧のプレビューから、置き換えたい UI に近いコンポーネントを見つける — コンポーネントカタログ →
- そのページの Blade タブの最小例をコピーし、props（color / size / appearance など）を合わせる
- 手書きしていたクラスの山を捨てる — 色・形・余白はテーマとチューンが引き受けます
どのコンポーネントに Alpine が必要か
button / badge / card / avatar / input / checkbox / progress / tooltip / breadcrumb / stat / timeline / stepper など
modal / tabs / accordion / dropdown / popover / sidebar / select / alert(dismissible) / notification / collapse など
よくある質問
クラス文字列と構造はそのまま使えます（CSS が読み込まれていれば見た目は再現されます）。ただし x-data のインタラクションは Alpine のものなので、React / Vue では各フレームワークの state に移植が必要です。公式のマルチフレームワーク対応は Web Components として計画中です。
特定のテーマに焼き込まれていません。出力クラスはセマンティックトークン（bg-primary、p-md 等）なので、コピー先の data-theme / data-tune に追従します。
はい。各例は実際にレンダリングして表示確認されたものだけを載せています（HTML タブがその証拠です — レンダリングに失敗した例はページに出せない仕組みです）。