Pinion UI
つくる速度に、上限はない。
ひとつのマークアップが、data-tune × data-theme で300通り以上に化ける。色も形も余白も書体も、属性ひとつで丸ごと変わる。迷ったら試せばいい — 書き直しの時間は、ゼロ。
<h1>Balance is the default.</h1> <p class="lead">Set once, travels together.</p> <x-button color="primary" icon="rocket">Ship it</x-button> <x-badge color="success">Active</x-badge> <x-input label="Email" /> <x-progress :value="68" /> <x-rating :value="4" />
792通りのプロ品質
tune × theme = 通り — 表示中 /
Starter
¥2,980/月
個人・小規模チーム向け。基本コンポーネント一式に対応。
Team
¥9,800/月
複数プロジェクト・複数人での利用に対応。プリセット保存つき。
Enterprise
要問合せ
SLA・専任サポート・カスタムトークン設計込みのフルプラン。
Starter
¥2,980/月
個人・小規模チーム向け。基本コンポーネント一式に対応。
Team
¥9,800/月
複数プロジェクト・複数人での利用に対応。プリセット保存つき。
Enterprise
要問合せ
SLA・専任サポート・カスタムトークン設計込みのフルプラン。
Tune
同じUI、違う「間（ま）」
tuneを切り替えるだけで空間設計が変わる。
Q. 同じコンポーネントのはずなのに、なぜこんなに印象が違って見えるのだろう？
A. 角の丸みや影の表情も、実は静かに変わっている。
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 または外側クリックで閉じる。
最新リリース
リリース一覧単一 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
いざ実装へ
パッケージを取得し、 コンポーネントを眺め、 UI を出荷しよう。
MIT ライセンス · Sparrowhawk Labs より を込めて
Powered by Yakaze Tech Studio