blatui

🧩 これは BlatUI のモノレポです。 Composer パッケージはリポジトリのルート（src/ + stubs/）にあります。 — Packagist はそこを直接読み込むため、composer require anousss007/blatui はそのまま使え、 apps/ は dist tarball から除外されます。コンポーネントは apps/demo/ で作成され、 stubs/ に生成されます。コンポーネントを編集する前に、コントリビューションをご覧ください。

---

BlatUI を選ぶ理由

• デフォルトでアクセシブルです。 WAI-ARIA のロール、完全なキーボードナビゲーションとフォーカス管理、WCAG AA の色コントラストを備えています。shadcn/ui の Base UI の動作を参考にし、実際のブラウザーで検証し、axe-core で監査しています。アクセシビリティは追加機能ではなく、すべてのコンポーネントに組み込まれています。
• コードはご自身のものです。 コンポーネントは vendor/ に隠されるのではなく、プロジェクトにコピーされます。自由に編集でき、パッケージを更新しても編集内容が上書きされることはありません。
• BLAT スタックです。 純粋な Blade コンポーネントに、インタラクティブ機能のための Alpine.js を少し加え、スタイリングには Tailwind CSS v4 を使用します。React は不要で、ビルド工程に縛られることもありません。
• Livewire 対応です。 すべてのフォームコントロール（入力欄、セレクト、チェックボックス、スイッチ、スライダー、日付／時刻ピッカー、ファイルアップロードなど）で wire:model が機能し、完全な双方向バインディングを利用できます。Flux Pro に代わる、無料でコードをご自身のものにできる選択肢です。Livewire ガイドを見る →
• shadcn/ui に忠実です。 同じデザイン言語、コンポーネント API、ブロックを Laravel 流に移植しています。
• 徹底したテーマ設定が可能です。 すべてのトークンが CSS 変数です。

要件

• PHP 8.2+ · Laravel 11、12 または 13
• Tailwind CSS v4 · Alpine.js 3 · Node 18+

インストール

# 1. Install the CLI
composer require anousss007/blatui

# 2. Peer packages used by the components
composer require gehrisandro/tailwind-merge-laravel mallardduck/blade-lucide-icons
npm install -D alpinejs @alpinejs/anchor @floating-ui/dom @alpinejs/collapse @alpinejs/focus

# 3. Publish the foundations (theme tokens + Alpine/chart/calendar engine)
php artisan vendor:publish --tag=blatui-foundations
#   → resources/css/blatui.css      (oklch design tokens, presets, light/dark)
#   → resources/js/blatui.js        (greenfield bootstrap — boots Alpine for you)
#   → resources/js/blatui-core.js   (engine: registerBlatUI, for apps already running Alpine)

# 4. Verify your setup
php artisan blatui:init

公開された基盤ファイルを 2 つの Vite エントリーポイントに指定します。各ファイルの内容を置き換えてください。

/* resources/css/app.css */
@import "./blatui.css";

// resources/js/app.js
import "./blatui.js";

blatui.css には Tailwind、デザイントークン、@theme マッピングが含まれます。blatui.js は Alpine とそのプラグインを起動し、ApexCharts を遅延読み込みします。 blatui:init を実行すると、すべて（パッケージ、トークン、インポート）が正しく設定されているか確認できます。

基盤ファイルは一度公開すれば、あとはご自身のものです。トークンを調整したり、チャートが不要なら チャートエンジンを削除したりできます。まだ不足しているものは blatui:init が知らせてくれます。

既存のプロジェクトへのインストール

すべて追加のみです。ファイルを置き換える必要はありません。

• Tailwind v4 が必須です。 BlatUI は v4 専用の機能（@theme inline、oklch）を使用します。Tailwind v3 をお使いの場合は、まず npx @tailwindcss/upgrade で移行してください。blatui:init がバージョンを検出します。
• CSS： 既存の app.css で、@import "tailwindcss"; の下に @import "./blatui.css"; を追加します。
• JS — すでに Alpine を使用していますか？ blatui.js はインポートしないでください（Alpine が二重に起動します）。代わりに、起動する前にご自身のインスタンスへ BlatUI を登録します。

import Alpine from 'alpinejs'
import { registerBlatUI } from './blatui-core.js'

registerBlatUI(Alpine)   // plugins + theme store + chart/calendar engines
window.Alpine = Alpine
Alpine.start()

• JS — Livewire または Flux を使用していますか？ Livewire は Alpine をバンドルして起動するため、npm install alpinejs は実行しないでください（Alpine が二重になる原因になります）。また、blatui.js もインポートしないでください。プラグインのみをインストールし（グラフを使用する場合に限り apexcharts も追加します）、alpine:init フックを使って Livewire の Alpine に BlatUI を登録します。

import { registerBlatUI } from './blatui-core.js'

document.addEventListener('alpine:init', () => {
    registerBlatUI(window.Alpine)
})

BlatUI はダークモード用の theme ストアを登録します。Flux がすでにダークモードを制御している場合は、両方が .dark を切り替えないように、registerBlatUI(window.Alpine, { darkMode: false }) を渡してください。

コンポーネントの追加

# Add one or more — dependencies are resolved automatically
php artisan blatui:add button card input

# See everything you can add — components, blocks & charts
php artisan blatui:list

# Details for a single component
php artisan blatui:list select

# Everything at once
php artisan blatui:add --all

コンポーネントは resources/views/components/ui/ に Blade タグとして配置されます。

<x-ui.card class="max-w-sm">
    <x-ui.card-header>
        <x-ui.card-title>Welcome back</x-ui.card-title>
        <x-ui.card-description>Sign in to continue.</x-ui.card-description>
    </x-ui.card-header>
    <x-ui.card-content class="space-y-3">
        <x-ui.input type="email" placeholder="[email protected]" />
        <x-ui.button class="w-full">Sign in</x-ui.button>
    </x-ui.card-content>
</x-ui.card>

blatui:add は、コンポーネントに必要な追加の composer／npm パッケージを表示します（例：グラフでは apexcharts が必要です）。

コンポーネントを最新の状態に保つ

コピーしたファイルはご自身で管理するため、アップグレードが自動で行われることはありません。blatui:update で変更点を確認し、ファイルごとに更新するかどうかを決められます。

# What would change across everything you have installed?
php artisan blatui:update --dry-run --diff

# Update, confirming each file that differs from the version we ship
php artisan blatui:update

# Just these families, no questions asked (your version is kept as .bak)
php artisan blatui:update button card --force

ファイルに差分がある場合、それはカスタマイズしたファイルか、古くなったコピーのいずれかです。ディスク上の情報だけでは区別できないため、BlatUI は差分を表示して確認を求めずにファイルを上書きすることはありません。--force を指定しても、置き換えるファイルの隣に .bak が作成されます（--no-backup で無効にできます）。新しいリリースでファミリーに追加されたファイルは、そのまま追加されます。

resources/views に対して Pint や Prettier を実行していますか？ フォーマッターがコピーしたすべてのコンポーネントのレイアウトを書き換えるため、すべてのファイルが変更されたものとして表示されます。これらは内容は同じで、再フォーマット済みとして別に集計され、--ignore-whitespace を指定すると除外されます。

php artisan blatui:update --dry-run --ignore-whitespace

CSS／JS の基盤はコピーではなく公開されるため、vendor:publish --tag=blatui-foundations --force で再同期します。エンジンが古くなっている場合は、blatui:init が通知します。

ブロックとグラフ

ブロック（ダッシュボード、サイドバー、ログインページなど）と70種類のグラフは、デモサイトからコピー＆ペーストして使用します。フルページの構成であり、プリミティブではないため、インストールするのではなく、必要なソースをそのまま取得してください。

👉 ライブデモでブロックとグラフを見る

コマンド

コマンド	説明
blatui:init	Doctor — パッケージ、Tailwind v4、テーマトークン、Alpine／エンジンの連携を確認します
blatui:list [component]	すべてのコンポーネントファミリーを一覧表示するか、1つの詳細を表示します
blatui:add <components...>	コンポーネント（と依存関係）をプロジェクトにコピーします
blatui:update [components...]	インストール済みコンポーネントとこのバージョンとの差分を表示し、更新します（--dry-run、--diff、--force、--ignore-whitespace）
blatui:doctor [path]	Blade をスキャンし、既知の落とし穴（フォーム内の型指定がないボタン、閉じタグの漏れ）を検出します
blatui:mcp	AI エディターがコンポーネントを検索・インストールできるよう、MCP サーバーを起動します（stdio）
vendor:publish --tag=blatui-foundations	テーマ CSS と JS エンジンを公開します

コントリビューション

BlatUI はモノレポです。リポジトリ、PR、CI はそれぞれ1つです。Composer パッケージはリポジトリのルートにあり、デモ／ドキュメントサイトとスターターキットは隣接するアプリです（.gitattributes により公開パッケージから除外されます）。

composer.json  src/  stubs/   → the published package (this is what `composer require` gets)
apps/demo/                     → authors AND renders every component; the live docs site
apps/starter/                  → the Laravel starter kit
scripts/build-package.sh       → regenerates stubs/ from apps/demo (CI enforces it)

コンポーネントは apps/demo/resources/views/components/ui/ で作成します（ここだけでレンダリングされるため、これが信頼できる唯一のソースです）。stubs/ は生成物なので、手動で編集しないでください。コンポーネントを変更したら、bash scripts/build-package.sh を実行し、両方をコミットしてください。差異があると CI は失敗します。詳しくは、CONTRIBUTING.md をご覧ください。

クレジット

BlatUI は、shadcn/ui を Laravel/Blade エコシステムに移植したものです。shadcn と貢献者の皆さんに感謝します。 アイコンは Lucide、チャートは ApexCharts を使用しています。

ライセンス

MIT — 個人利用および商用利用は無料です。