つくる速度に、 上限はない。
デザインは固めず、 走りながら決めていい。 色も形も余白も、 属性ひとつで丸ごと変わる。 ピボットは一瞬、 やり直しの時間はゼロ。 AI と並走するこの UI で、 クリエイティブが、 変幻自在に加速する。
最新リリース
リリース一覧単一 import プリセット
pinion-ui.css を 1 行 import するだけで、 Tailwind v4 · daisyUI v5 · tune トークンが app.css に組み込まれる。
リリース — 2026-04
Focus + Collapse プラグイン
ui:install が @alpinejs/focus と @alpinejs/collapse を自動配線。 modal の focus-trap と accordion の高さアニメが追加設定なしで動く。
リリース — 2026-05
Popover の padding プロパティ
<x-popover> に padding プロパティが新登場。 右クリックメニュー等で中身にぴったり寄せられる。
リリース — 2026-05
AI エージェントのための設計
AI エージェントが pinion-ui を正しく書ける
-
プロジェクト規約は
CLAUDE.mdを 1 度読めば足りる -
AGENTS.mdがコンポーネント単位の lookup workflow を案内 -
reference/components/配下に 46 件の per-component リファレンス - Fresh-Laravel install 検証済 — 新規アプリにパッケージを入れるだけでビルドが通る
60 秒で導入
# 1. パッケージを追加
composer require sparrowhawk-labs/pinion-ui
# 2. アセットと AGENTS.md scaffolding を install
php artisan ui:install --ai
# 3. Build & 起動
npm run build && php artisan serve
--ai を付けると CLAUDE.md と AGENTS.md が repo ルートに展開される。
コンポーネント — ライブ体験
46 中 9 つを抜粋 — サイドバーから任意のコンポーネントの全マトリクスを開ける<x-modal>
Modal
Alpine ベースの dialog。 focus trap · ESC · 背景クリックで dismiss。
Pinion UI へようこそ
46 コンポーネント、 すべて themeable、 すべて AI エージェント向けにドキュメント化済。 Esc または外側クリックで閉じる。
<x-tooltip>
Tooltip
下のボタンをホバー:
いざ実装へ
パッケージを取得し、 コンポーネントを眺め、 UI を出荷しよう。
MIT ライセンス · sparrowhawk-labs より を込めて